前端开发 第二节CSS
CSS总结笔记:
3.CSS样式
css,专门用来“美化”标签。
- 基础CSS,写简单页面&看懂&改。
- 模块、调整和修改
3.1CSS应用方法
1.在标签上
- 高度和宽度样式:
<img src="xxx" style="height:100px;" />
- 颜色样式:
<div style="color:red;">中国联通</div>
2.在head标签中写style标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
.c1{
color:red;
}
</style>
</head>
<body>
<h1 class='c1'>用户登录</h1>
<form method="post" action="/login">
<div>
用户名:<input type="text" name="username">
</div>
<div>
密码:<input type="password" name="password">
</div>
<input type="submit">
</form>
</body>
</html>
3.写到文件中
.c1{
height:100px;
}
.c2{
color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<link rel="stylesheet" href="common.css" />
</head>
<body>
</body>
</html>
案例:Flask中的应用(登录注册)
CSS文件:
.xx{
color: green;
}
login.html文件(在HTML头内写CSS):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
.c1{
color: red;
}
.c2{
height: 50px;
}
</style>
</head>
<body>
<h1 class="c1">用户登录</h1>
<form method="post" action="/login">
<div class="c2">
用户名:<input type="text" name="username">
</div>
<div class="c2">
密码:<input type="password" name="password">
</div>
<input type="submit">
</form>
</body>
</html>
register.html文件(在外部引入CSS文件):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" href="/static/commons.css">
</head>
<body>
<h1 class="xx">用户注册</h1>
<div>
用户名:<input type="text">
</div>
<div>
密码:<input type="password">
</div>
<div>
性别:<input type="radio">男 <input type="radio">女
</div>
<div>
爱好:
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
</div>
<div>
擅长的领域:
<select multiple>
<option>Python</option>
<option>C++</option>
<option>Java</option>
</select>
</div>
<div>
备注:<textarea></textarea>
</div>
<div>
<input type="button" value="button按钮">
<input type="submit" value="button按钮">
</div>
</body>
</html>
3.2CSS选择器
-
ID选择器(id)
#c2{ color: gold; } <div id="c2">美国</div>
-
类选择器(class)
.c1{ color: red; } <div class="c1">中国</div>
-
标签选择器
li{ color: pink; } <ul> <li>北京</li> <li>上海</li> <li>深圳</li> </ul>
-
属性选择器
input[type='text']{ border: 1px solid red; } .v1[xx="456"]{ color: gold; }
<div class="v1" xx="123">a</div> <div class="v1" xx="456">b</div> <div class="v1" xx="999">c</div>
-
后代选择器
无穷代:
.yy li{ color: pink; }
<div class="yy"> <ul> <li>美国</li> <li>日本</li> <li>韩国</li> </ul> </div>
一代:
.yy > a{ color: blue; }
<div class="yy"> <a>百度</a> <div> <a>谷歌</a> </div> <ul> <li>美国</li> <li>日本</li> <li>韩国</li> </ul> </div>
关于选择器:
使用频率多:类选择器、标签选择器、后代选择器
使用频率少:属性选择器、ID选择器
关于多个样式覆盖问题:
若样式重复,style最后一个样式为最终样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red;
border: 1px solid red;
}
.c2{
font-size: 28px;
color: green;
}
</style>
</head>
<body>
<div class="c1 c2">中国联通</div>
</body>
</html>
若不想覆盖(加入! important):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red !important;
border: 1px solid red;
}
.c2{
font-size: 28px;
color: green;
}
</style>
</head>
<body>
<div class="c1 c2">中国联通</div>
</body>
</html>
3.4样式
1.高度和宽度
.c1{
height: 300px;
width: 500px;
}
注意:宽度,支持百分比。
2.块级和行内标签
- 块级
- 行内
- css样式(既有块级又有行内标签特点):标签 ->
display:inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
display: inline-block;
height: 100px;
width: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<span class="c1">中国移动</span>
<span class="c1">中国联通</span>
<span class="c1">中国电信</span>
</body>
</html>
块级和行内标签的转换:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="display: inline-block">中国</div>
<span style="display:block;">联通</span>
</body>
</html>
高频率:块级+块级&行内。
3.字体和颜色
- color:颜色
- font-size:大小
- font-weight:加粗
- font-family:字体格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red;
font-size: 18px;
font-weight: 500;
font-family: Microsoft YaHei UI;
}
</style>
</head>
<body>
<div class="c1">中国联通</div>
<div>中国移动</div>
</body>
</html>
4.文字对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 59px;
width: 300px;
border: 1px solid red;
text-align: center; /* 水平方向居中 */
line-height: 59px; /* 垂直方向居中*/
}
</style>
</head>
<body>
<div class="c1">刘备</div>
</body>
</html>
5.浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<span>左边</span>
<span style="float: right">右边</span>
</div>
</body>
</html>
div默认块级标签,若浮动起来自己有多宽占多宽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
float: left;
width: 200px;
height: 170px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
如果标签浮动起来,就会脱离文档流。
解决:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
float: left;
width: 200px;
height: 170px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="background-color: dodgerblue">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div style="clear: both"></div>
</div>
</body>
</html>
6.内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
border: 1px solid red;
height: 200px;
width: 200px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: gold">刘备</div>
<div>
汉景帝第十九代玄孙
</div>
</div>
</body>
</html>
7.外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue"></div>
<div style="background-color: red;height: 100px;margin-top: 10px;"></div>
</body>
</html>
案例:小米商城(导航条)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.header{
height: 38px;
color: #b0b0b0;
background: #333;
}
.container{
width: 1226px;
margin: 0 auto;
}
.header .menu{
float: left;
color: white;
height: 38px;
}
.header .account{
float: right;
color: white;
height: 38px;
line-height: 38px;
}
.header a{
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a>小米商城</a>
<a>MIUI</a>
<a>云服务</a>
<a>有品</a>
<a>开放平台</a>
</div>
<div class="account">
<a>登录</a>
<a>注册</a>
<a>消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>
总结
-
body标签,默认有一个边距,造成页面四边都有白色间隙,如何去除?
body{ margin: 0; }
-
内容居中
-
文本居中,文本会在这个区域中居中。
<div style="width: 200px; text-align: center">刘备</div>
-
区域居中,自己要有宽度 +
margin-left:auto;margin-right:auto
.container{ width: 980px; margin: 0 auto; } <div class="container">xxx</div>
-
-
父级没有高度或者宽度,被本级支撑起来。
-
若存在浮动,一定记得加入
<div style="clear: both"></div>
案例:小米商城二级菜单
1.骨架部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.sub-header{
height: 100px;
background-color: #b0b0b0;
}
.container{
width: 1226px;
margin-right: auto;
margin-left: auto;
}
.sub-header .ht{
height: 88px;
}
.sub-header .logo{
width: 234px;
float: left;
}
.sub-header .menu-list{
float: left;
}
.sub-header .search{
float: right;
}
</style>
</head>
<body>
<div class="sub-header">
<div class="container">
<div class="ht logo">abc</div>
<div class="ht menu-list">abc</div>
<div class="ht search">asd</div>
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
2.logo部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.sub-header{
height: 100px;
background-color: #b0b0b0;
}
.container{
width: 1226px;
margin-right: auto;
margin-left: auto;
}
.sub-header .ht{
height: 88px;
}
.sub-header .logo{
width: 234px;
float: left;
}
.sub-header .logo a{
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img{
height: 56px;width: 56px;
}
.sub-header .menu-list{
float: left;
}
.sub-header .search{
float: right;
}
</style>
</head>
<body>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- a,行内标签;默认设置为高度、边距无效。 -> 块级 -->
<a href="https://www.mi.com/">
<img src="/images/logo-mi2.png">
</a>
</div>
<div class="ht menu-list">abc</div>
<div class="ht search">asd</div>
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
3.菜单部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.sub-header{
height: 100px;
}
.container{
width: 1226px;
margin-right: auto;
margin-left: auto;
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width: 234px;
float: left;
}
.sub-header .logo a{
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img{
height: 56px;width: 56px;
}
.sub-header .menu-list{
float: left;
line-height: 100px;
border: 1px;
}
.sub-header .menu-list a{
padding: 0 10px;
display: inline-block;
color: #333;
font-size: 16px;
/*去掉链接下划线*/
text-decoration: none;
}
/*hover当鼠标悬停*/
.sub-header .menu-list a:hover{
color: darkorange;
}
.sub-header .search{
float: right;
}
</style>
</head>
<body>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- a,行内标签;默认设置为高度、边距无效。 -> 块级 -->
<a href="https://www.mi.com/">
<img src="/images/logo-mi2.png">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi手机</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
</div>
<div class="ht search"></div>
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
4.顶部菜单+二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.header{
height: 38px;
color: #b0b0b0;
background: #333;
}
.container{
width: 1226px;
margin: 0 auto;
}
.header .menu{
float: left;
color: white;
height: 38px;
}
.header .account{
float: right;
color: white;
height: 38px;
line-height: 38px;
text-decoration: none;
}
.header a{
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header .account:hover{
color: white;
}
.header a:hover{
color: white;
}
.sub-header{
height: 100px;
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width: 234px;
float: left;
}
.sub-header .logo a{
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img{
height: 56px;width: 56px;
}
.sub-header .menu-list{
float: left;
line-height: 100px;
border: 1px;
}
.sub-header .menu-list a{
padding: 0 10px;
display: inline-block;
color: #333;
font-size: 16px;
/*去掉链接下划线*/
text-decoration: none;
}
/*hover当鼠标悬停*/
.sub-header .menu-list a:hover{
color: darkorange;
}
.sub-header .search{
float: right;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="https://www.mi.com/">小米商城</a>
<a href="https://www.mi.com/">MIUI</a>
<a href="https://www.mi.com/">云服务</a>
<a href="https://www.mi.com/">有品</a>
<a href="https://www.mi.com/">开放平台</a>
</div>
<div class="account">
<a href="https://www.mi.com/">登录</a>
<a href="https://www.mi.com/">注册</a>
<a href="https://www.mi.com/">消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- a,行内标签;默认设置为高度、边距无效。 -> 块级 -->
<a href="https://www.mi.com/">
<img src="/images/logo-mi2.png">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi手机</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
</div>
<div class="ht search"></div>
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
小结
-
a标签是行内标签,行内标签的高度、内外边距,默认无效。
-
垂直方向居中
- 文本:line-height
- 图片:边距
-
a标签默认有下划线。(去除:
text-decoration: none;
) -
鼠标放上去之后(hover)
a:hover{ color: white; }
案例:小米商城推荐区域
若想还原,图片部分自行加入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
img {
width: 100%;
height: 100%;
}
.left{
float: left;
}
.header{
height: 38px;
color: #b0b0b0;
background: #333;
}
.container{
width: 1226px;
margin: 0 auto;
}
.header .menu{
float: left;
color: white;
height: 38px;
}
.header .account{
float: right;
color: white;
height: 38px;
line-height: 38px;
text-decoration: none;
}
.header a{
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header .account:hover{
color: white;
}
.header a:hover{
color: white;
}
.sub-header{
height: 100px;
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width: 234px;
float: left;
}
.sub-header .logo a{
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img{
height: 56px;width: 56px;
}
.sub-header .menu-list{
float: left;
line-height: 100px;
border: 1px;
}
.sub-header .menu-list a{
padding: 0 10px;
display: inline-block;
color: #333;
font-size: 16px;
/*去掉链接下划线*/
text-decoration: none;
}
/*hover当鼠标悬停*/
.sub-header .menu-list a:hover{
color: darkorange;
}
.sub-header .search{
float: right;
}
.slider img{
width: 1226px;
height: 460px;
}
.news .channel{
width: 228px;
height: 164px;
background-color: #333333;
padding: 3px;
}
.news .list-item{
width: 316px;
height: 170px;
}
.news .channel .item{
height: 86px;
width: 76px;
float: left;
text-align: center;
opacity: 0.5;
}
.news .channel .item img{
height: 24px;
width: 24px;
display: block;
margin: 0 auto 4px;
}
.news .channel .item a{
font-size: 12px;
display: inline-block;
padding-top: 18px;
color: #fff;
text-decoration: none;
}
.news .channel .item a:hover{
opacity: 1;
}
.news{
margin-top: 14px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="https://www.mi.com/">小米商城</a>
<a href="https://www.mi.com/">MIUI</a>
<a href="https://www.mi.com/">云服务</a>
<a href="https://www.mi.com/">有品</a>
<a href="https://www.mi.com/">开放平台</a>
</div>
<div class="account">
<a href="https://www.mi.com/">登录</a>
<a href="https://www.mi.com/">注册</a>
<a href="https://www.mi.com/">消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- a,行内标签;默认设置为高度、边距无效。 -> 块级 -->
<a href="https://www.mi.com/">
<img src="/images/logo-mi2.png">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi手机</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
</div>
<div class="ht search"></div>
<div style="clear:both"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="/images/b1.png">
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel left">
<div class="item">
<a href="https://www.mi.com/">
<img src="/images/c1.png" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/images/c1.png" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/images/c1.png" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/images/c1.png" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/images/c1.png" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/images/c1.png" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/images/c1.png" >
<span>保障服务</span>
</a>
</div>
<div style="clear: both"></div>
</div>
<div class="list-item left" style="margin-left: 14px">
<img src="/images/list1.png" />
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="/images/list2.png" />
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="/images/list3.png" />
</div>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>
设置透明度:
.c1{
opacity: 1;
}
CSS知识点
hover
鼠标悬停显示图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
font-size: 18px;
color: gold;
}
.c1:hover{
font-size: 50px;
color: darkorange;
}
.c2{
height: 300px;
width: 500px;
border: 1px solid red;
}
.c2:hover{
border: 2px solid green;
}
.download{
display: none;
}
.app:hover .download{
display: block;
}
</style>
</head>
<body>
<div class="c1">移动</div>
<div class="c2">联通</div>
<div class="app">
<div>点击下载</div>
<div class="download">
<img src="/images/app.png">
</div>
</div>
</body>
</html>
after
c1样式后都加入content内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:after{
content: "五虎上将";
}
</style>
</head>
<body>
<div class="c1">关羽</div>
<div class="c1">张飞</div>
<div class="c1">赵云</div>
<div class="c1">黄忠</div>
<div class="c1">马超</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
position
- fixed
- relative
- absolute
1.fiex
固定在窗口的某个位置
案例:固定客服电话位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: #b0b0b0;
height: 2000px;
width: 1226px;
margin: 0 auto;
}
.c2{
position: fixed;
border: 2px solid red;
height: 64px;
width: 64px;
right: 10px;
bottom: 100px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">客服电话</div>
</body>
</html>
案例:对话框
z-index:定义position在哪一层,数值越大在越上层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: #b0b0b0;
height: 2000px;
width: 1226px;
margin: 0 auto;
}
.c2{
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
height: 500px;
width: 400px;
background-color: white;
top: 200px;
z-index: 10;
}
.mask{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
opacity: 0.7;
z-index: 9;
}
</style>
</head>
<body>
<!--背景-->
<div class="c1"></div>
<!--幕布-->
<div class="mask"></div>
<!--对话框-->
<div class="c2"></div>
</body>
</html>
2.relative和absolute
相对进行显示:
父类加上position:relative
子类加上position:absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 500px;
width: 700px;
border: 1px solid red;
position: relative;
}
.c1 .c2{
background-color: gold;
position: absolute;
height: 100px;
width: 100px;
right: 0;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>
案例:在相对位置添加二维码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
img {
width: 100%;
height: 100%;
}
.left{
float: left;
}
.header{
height: 38px;
color: #b0b0b0;
background: #333;
}
.container{
width: 1226px;
margin: 0 auto;
}
.header .menu{
float: left;
color: white;
height: 38px;
}
.header .account{
float: right;
color: white;
height: 38px;
line-height: 38px;
text-decoration: none;
}
.header a{
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header .account:hover{
color: white;
}
.header a:hover{
color: white;
}
.sub-header{
height: 100px;
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width: 234px;
float: left;
}
.sub-header .logo a{
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img{
height: 56px;width: 56px;
}
.sub-header .menu-list{
float: left;
line-height: 100px;
border: 1px;
}
.sub-header .menu-list a{
padding: 0 10px;
display: inline-block;
color: #333;
font-size: 16px;
/*去掉链接下划线*/
text-decoration: none;
}
/*hover当鼠标悬停*/
.sub-header .menu-list a:hover{
color: darkorange;
}
.sub-header .search{
float: right;
}
.slider img{
width: 1226px;
height: 460px;
}
.news .channel{
width: 228px;
height: 164px;
background-color: #333333;
padding: 3px;
}
.news .list-item{
width: 316px;
height: 170px;
}
.news .channel .item{
height: 86px;
width: 76px;
float: left;
text-align: center;
opacity: 0.5;
}
.news .channel .item img{
height: 24px;
width: 24px;
display: block;
margin: 0 auto 4px;
}
.news .channel .item a{
font-size: 12px;
display: inline-block;
padding-top: 18px;
color: #fff;
text-decoration: none;
}
.news .channel .item a:hover{
opacity: 1;
}
.news{
margin-top: 14px;
}
.app{
position: relative;
}
.app .download{
position: absolute;
width: 100px;
display: none;
}
.app:hover .download{
display: block;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="https://www.mi.com/">小米商城</a>
<a href="https://www.mi.com/">MIUI</a>
<a href="https://www.mi.com/">云服务</a>
<a href="https://www.mi.com/">有品</a>
<a href="https://www.mi.com/">开放平台</a>
<a href="https://www.mi.com/" class="app">App下载
<div class="download">
<img src="images/app.png">
</div>
</a>
</div>
<div class="account">
<a href="https://www.mi.com/">登录</a>
<a href="https://www.mi.com/">注册</a>
<a href="https://www.mi.com/">消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- a,行内标签;默认设置为高度、边距无效。 -> 块级 -->
<a href="https://www.mi.com/">
<img src="/images/logo-mi2.png">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">Redmi手机</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
</div>
<div class="ht search"></div>
<div style="clear:both"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="/images/b1.png">
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel left">
<div class="item">
<a href="https://www.mi.com/">
<img src="/images/c1.png" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/images/c1.png" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/images/c1.png" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/images/c1.png" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/images/c1.png" >
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="/images/c1.png" >
<span>保障服务</span>
</a>
</div>
<div style="clear: both"></div>
</div>
<div class="list-item left" style="margin-left: 14px">
<img src="/images/list1.png" />
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="/images/list2.png" />
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="/images/list3.png" />
</div>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>
边框
- border:1px 1像素边框
- solid red 实心红色
- dotted red 虚线红色
- border-left 指定边框
背景色
- background-color
总结
以上是CSS常用功能
在开发过程中会用到BootSrap模板
模板:
- 模板基本使用逻辑
- 模板+自己的CSS