网站建设多少时间,网红营销推广,谷歌广告联盟网站,做机械设计的要知道哪些网站1.高度和宽度
.c1{height:300px;width:500px;
} 注意事项#xff1a; 宽度#xff0c;支持百分比 行内标签#xff1a;默认无效 块级标签#xff1a;默认有效#xff08;右侧区域就算是空白#xff0c;也不给占用#xff09;
2.块级和行内标签 css样式#xff1a;标签…1.高度和宽度
.c1{height:300px;width:500px;
} 注意事项 宽度支持百分比 行内标签默认无效 块级标签默认有效右侧区域就算是空白也不给占用
2.块级和行内标签 css样式标签--display:inline-block允许在元素上设置宽度和高度
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{display:inline-block;height:100px;width:300px;border:1px solid red;}/style
/head
bodyspan classc1北京/spanspan classc1上海/spandiv styledisplay:inline;中/divspan styledisplay:block;国/span
/body
/html 下图我们可以看到display:inline-block标签的效果 中 #这行本来是块级标签加上styledisplay:inline;变为行内标签 国 #这行本来是行内标签加上styledisplay:block;变为块级标签 3.字体和颜色
.c1{color:red;/*颜色*/font-size:60px;/*字体大小*/font-weight:600;/*字体加粗*/font-family:字体;/*字体样式*/}
4.文字的对齐方式
.c1{height:60px;width:300px;text-align:center;/*水平方向居中*/line-height:60px;/*垂直方向居中,使用其值等于height属性值的line-height属性,只能用于一行数据*/
}
5.浮动 float 属性定义元素在哪个方向浮动
bodyspan 左边/spanspan stylefloat:right右边/span
/body !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{float:left;height:100px;width:300px;border:1px solid red;}/style
/head
bodyspan classc11/spanspan classc12/spanspan classc13/span/body
/html float会让标签浮动之后脱离文档流可以理解成覆盖在网页的最上面需要加
styleclear:both;使标签恢复正常
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{float:left;height:100px;width:300px;border:1px solid red;}/style
/head
body
div stylecolor:green;div classc11/divdiv classc12/divdiv classc13/divdiv styleclear:both;/div
/div
/body
/html
6.边距
内边距
下面这个代码是给内边距上下左右都留了20px
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.outer{border:1px solid red;height:400px;width:200px;padding-top:20px;padding-left:20px;padding-right:20px;padding-bottom:20px;}/style
/head
bodydiv classouterdiv stylebackground-color:gold;内边距/divdiv222/div/div
/body
/html 可以简写成这样顺序是顺时针 上右下左
padding:20px 10px 15px 20px;
外边距
很好理解就是标签与周围创建的空间
p {margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;
}
7.区域局中
.c1{margin:0 auto;}
父亲如果自己没有高度或宽度会被孩子撑起来
8.hover(伪类
选择鼠标指针浮动在其上的元素并设置其样式,例如下面这个代码本来显示的111111是红色的但当鼠标挪上去时会显示黄色并变大
headmeta charsetUTF-8titleTitle/titlestyle.c1{color:red;font-size:18px;}.c1:hover{color:yellow;font-size:50px;}/style
/head
body
div stylecolor:green;div classc11111111111/div
/div
/body 9.after伪类
在每个指定元素之后插入内容
headmeta charsetUTF-8titleTitle/titlestyle.clearfix:after{content:333 ;}/style
/head
body
div div classclearfix1111111111/divdiv classclearfix22222/divdiv classclearfix44444/div
/div
/body 10.position
fixed 生成绝对定位的元素相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。 headmeta charsetUTF-8titleTitle/titlestyle.back{position:fixed;width:600px;height:600px;border:1px solid red;right:0;}/style
/head
bodydiv classback/divdiv styleheight:1000px;background-color:white/div
/body 固定红框不随着页面滑动而改变位置 headmeta charsetUTF-8titleTitle/titlestyle.back{position:fixed;width:300px;height:500px;background-color:white;left: 0;right: 0;margin:0 auto;top:200px;}.mask{background-color:black;position:fixed;left:0;right:0;top:0;bottom:0;opacity:0.3;}/style
/head
bodydiv classmask/divdiv classback登录/div
/body
可以用于做网页固定登录窗口 relative生成相对定位的元素 absolute生成绝对定位的元素
headmeta charsetUTF-8titleTitle/titlestyle.c1{height:300px;width:500px;border:1px solid red;margin:100px;position:relative;}.c1 .c2{height:59px;width:59px;background-color:green;position:absolute;right:0px;top:50px;}/style
/head
bodydiv classc1div classc2/div/div
/body 11.border边框
headmeta charsetUTF-8titleTitle/titlestyle.c1{height:300px;width:500px;border:3px solid red;border-left:3px solid green;margin:100px;position:relative;}/style
/head
bodydiv classc1/div
/body 12.background-color背景色
在上述代码中加一行background-color:black;将框中背景改成黑色 .c1{height:300px;width:500px;border:3px solid red;border-left:3px solid green;background-color:black;margin:100px;position:relative;}
