html_css完成搜狗页面

html_css学习记录(搜狗页面)


html与css

html是超文本标记语言,超文本的意思是它的页面可以包含图片,链接,音乐和程序等非文字元素。主要特点是使用标记来描述网页。
css则是一般与选择器配合使用来设置样式,从而使得网页更加美观。

类选择器与id选择器

类选择器为:class="",id选择器为:id=""。他们都可以设置样式,而最根本区别是类选择器可以多次出现,而id选择器只可以出现一次。不过使用JavaScript或者动态调用对象时就要用到id。在设置选择器样式的时候,类选择器以".“开头,id选择器以”#"开头。都写在html的 style 里。

margin,border,padding,content的区别

在这里插入图片描述
简单的由里到外的说,content(内容),padding(内边框),border(边框),margin(外边框)
margin:控制块级元素之间的距离,默认顺序是顺时针的上右下左,当上下,左右相等可简写。
padding:控制块级元素内部,即内容(content)与边框(border)的距离。
border:边框。
content:内容。

position

一般用到的是absolute和relative;
absolute是以最近的已定位的父元素,如果父元素本身没有使用position定位,则相对于文档(html)定位。将对象从文档流里拖出使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。
relative: 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,一般配合absolute使用。
绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位。
一般优先用float其次用position进行排版。

float

参考:https://www.cnblogs.com/acorn/p/5249089.html
float可以让元素脱离标准流,漂浮在标准流上,和标准流不是一个层次。
可以结合clear来使漂流的元素完成排版。

伪类

常用的伪类有以下五种
:active 向已被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时,向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的
在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的

display

display: none; 元素不显示出来,可与伪类结合使用。
display一般用于转化或规定格式,一般格式为以下三种。
行内元素(inline):
(1)设置宽高无效
(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间
(3)不会自动进行换行
块状元素(block):
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起,默认排列方式为从上至下
行内块状元素(inline-block):
(1)不自动换行
(2)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)默认排列方式为从左到右

琐碎小点

line-height:设置行高;
height: 设置高度;(需要为块状元素才有效)
width: 设置宽度;(需要为块状元素才有效)
z-index: 元素堆叠顺序;
font-size: 字体大小;
color: 元素颜色;
text-decoraton: 一般用于取消下划线;
font-weight: 设置元素粗细;
border-width: 边框厚度;
border-style: 边框格式;
opacity: 透明度;
background: 背景颜色;
text-align: 元素对齐方式;

搜狗网页练习代码



搜狗搜索引擎 - 上网从搜狗开始
新闻网页微信知乎图片视频明医英文问问学术更多地图购物百科知识应用翻译指数党建全部广东 深圳多云23°优 42显示卡片 换肤设置搜索设置高级搜索帮助登录

搜狗搜索APP

搜你所想

搜狗输入法浏览器网页导航
关于搜狗 - About Sogou - 企业推广 - 免责声明 - 意见反馈及投诉 - 隐私政策
© 2004-2018 Sogou.com / 京网文 (2016) 6432-852号 / (京)-经营性-2016-0019京ICP证050897号/京ICP备11001839号-1/京公网安备11000002000025号


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部