HTML CSS
1.HTML写结构
HTML : 标签分类:
基本标签 网页结构 <!DOCTYPE html> head title meta link body
文本标签 a p h1~h6 label span strong b i em del
格式标签 br hr
容器标签 div
列表标签 ol ul li
图片标签 img
表单元素 input
块元素: h1~h6 div p ul ol li 可以设置宽高 不与其他元素共行 独占一行显示
行内元素: a span b strong em i 宽高由内容多少决定,不能手动设置,可以共行显示
行内块元素: img input 可以设置宽高 可以共行
2.CSS 设置样式 外观
CSS
引入方式:
行内 style属性 <p style=""></p>
文档内嵌 在头部通过<style></style>
选择器 (匹配标签应用样式)
标签选择器 img{} 类选择器 .leiming{}
后代选择器 div img{}
交集选择器 div.box{} 通配符选择器 *{}
伪类选择器(针对超链接不同状态设置样式) :link :visited :hover :active
CSS 属性:
-----样式外观
文本属性:
color:red;(文本颜色) font-size:16px;(字体大小)
text-align:center;(水平方向对齐方式)
line-height:30px;(一般用来设置垂直居中,行高=容器高度)
背景属性: background-color:red;(背景颜色)
background-image:url(../image/1.jpg);
background-size:cover;(背景图片大小尺寸)
background-repeat:no-repeat;(背景图片是否重复进行平铺)
background-attachment:fixed;(固定背景图片不跟随网页滚动)
基本设置: width:200px; height:200px;(设置宽高)
margin:0px;(元素与元素之间的间距--外边距)
padding:0px;(元素内容与边框之间的距离--内边距)
其他设置: border :none;(取消边框) outline:none;(取消轮廓线)
------元素布局
布局设置: float:left;(浮动)
position:relative(absolute); top:100px; left:100px;
兼容问题:
1.行内块元素 水平方向的间隙 : 设置父元素 font-size:0;
2.行内块元素 垂直方向上对不齐: vertical-align:bottom;
网页布局模式
Div + CSS
网友评论