一、什么是CSS?
- CSS指的是层叠样式表(Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件中
CSS中常使用盒子模型布局,把网页分成一块一块的,在制作网页时会清楚知道在哪个块里做什么样式。
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
.all{
width: 1000px;
height: 704px;
margin: 0 auto;
background-color: bisque;
}
.top{
width: 1003px;
height: 100px;
background-color: brown;
border: 1px solid black;
}
.content{
width: 1005px;
height: 500px;
background-color: cadetblue;
}
.content .one{
width: 250px;
height: 100%;
background-color: chartreuse;
float: left;
border-left: 1px solid black;
}
.content .two{
width: 500px;
height: 100%;
background-color: chocolate;
float: left;
border-left: 1px solid black;
}
.content .three{
width: 250px;
height: 100%;
background-color: cornflowerblue;
float: left;
border-left: 1px solid black;
border-right: 1px solid black;
}
.bottom{
width: 1003px;
height: 100px;
background-color: cyan;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="all">
<div class="top">top</div>
<div class="content">
<div class="one">content-one</div>
<div class="two">content-two</div>
<div class="three">content-three</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
二、在制作网页时常用的属性
1、外边距(margin)
- margin-top 上边距
- margin-right 右边距
- margin-bottom 下边距
- margin-left 左边距
单独设置一个margin时默认顺序为上右下左
- margin: 10px;上右下左
- margin: 10px 10px;上下、左右
- margin: 10px 10px 10px;上、左右、下
- margin: 10px 10px 10px 10px;上、右、下、左
- margin: 0 auto;设置水平居中
2、内边距(padding)
用法和内边距相似top、right、bottom、left
3、边框(border)
- border-top 上边框
- border-right 右边框
- border-bottom 下边框
- border-left 左边框
border: 1px solid black;
里面的值没有固定顺序,第一个值设置边框的大小,第二个值设置边框为实线边框,第三个值设置颜色。边框样式常用的有实线(solid)、虚线(dashed)。
4、圆角(border-radius)
- border-radius: 5px;上右下左
- border-radius: 5px 10px;上下、左右
- border-radius: 5px 10px 15px;上、左右、下
- border-radius: 5px 10px 15px 20px;上、右、下、左
5、浮动(float)
- float: none;不浮动
- float: left;左浮动
- float: right;右浮动
设置浮动通常对块元素设置,在制作网页时会经常用到浮动
浮动前
浮动后
6、定位(position)
- static 静态布局
- absolute 绝对布局 一般给里面嵌套的元素使用
- relative 相对布局 一般给父级元素去使用
在设置网页时定位会比较少用,使用定位时一般要指定父元素,否则修改页面时会一直去调整定位元素的位置,会比较麻烦。
7、文本控制
- 文本水平对齐方式:text-align: left(左对齐)center(居中对齐)right(右对齐)
- 文本垂直对齐方式:vertical-align:sub[设置文字为下标] super[设置文字为上标]top[把元素的顶端与行中最高元素的顶端对齐]text-botton[把元素的低端与父元素字体的低端对齐]
通常使用line-height:属性值;设置属性值和父元素的高度一样就会使文本垂直对齐。
8、背景
- 背景颜色 background-color: 属性值;属性值可以为颜色的英文单词,rgb(红0-255,绿0-255,蓝0-255),rgba(红0-255,绿0-255,蓝0-255,透明度0-1)
- 背景图像 background-image: url(背景图像的位置及全称)
9、超链接(a)
- text-decoration: none;去掉下划线
10、伪类
- 未访问链接 :a:link{color:#ff0000}
- 已访问的链接:a:visited{color:#00ff00}
- 鼠标移动到链接上:a:hover{color:#ff00ff}(比较常用)
- 鼠标按下到链接上:a:active{color:#0000ff}
三、案例(新手制作,勿喜勿喷)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>机票订购</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
.clearfix::after,
.clearfix::before {
content: '';
display: table;
clear: both;
}
.all {
width: 1519.2px;
height: 2225px;
}
/* 设置导航栏 */
.all .nav {
width: 1519.2px;
height: 70px;
background-color: #333333;
}
/* 设置logo */
.nav .nav-logo {
width: 240px;
height: 70px;
float: left;
margin-left: 111px;
}
.nav .nav-content {
width: 797.2px;
height: 70px;
line-height: 70px;
text-align: center;
margin-left: 723px;
}
.nav .nav-content li {
float: left;
}
.nav .nav-content li a {
padding: 25px 40px;
text-decoration: none;
color: white;
}
.nav-content li.nav-content-one a {
background-color: #000000;
}
.nav .nav-content li a:hover {
background-color: #000000;
}
/* 设置图片背景 */
.all .img {
width: 100%;
height: 300px;
background: url(./飘城旅行社图片/headline1.jpg);
}
.img .img-one {
width: 100%;
height: 300px;
background-color: rgba(0, 0, 0, 0.4);
}
.img-one h1 {
font-size: 35px;
font-weight: bold;
color: white;
margin-top: 103px;
margin-left: 149px;
letter-spacing: 2px;
}
.img-one p {
font-size: 19px;
color: white;
font-weight: bold;
margin-top: 12px;
margin-left: 149px;
letter-spacing: 2px;
}
/* 设置主体 */
.main {
width: 100%;
height: 1243px;
}
/* 主体左边 */
.main .main-left {
width: 877px;
height: 1243px;
float: left;
margin-left: 148px;
}
.main .main-left h2 {
width: 875px;
height: 50px;
line-height: 50px;
font-size: 30px;
margin-top: 12px;
color: rgb(92, 90, 90);
border-bottom: 1px dashed black;
}
.main-left .left-div-one {
width: 875px;
height: 180px;
font-size: 20px;
margin-top: 20px;
color: #666666;
}
.main-left .left-div-one p span {
color: white;
background-color: #458B00;
padding: 5px 8px;
border-radius: 4px;
margin: 0 10px 0 15px;
}
.left-div-one ul {
width: 686px;
height: 39px;
margin-top: 20px;
float: left;
}
.left-div-one .flight:nth-child(3) {
margin-top: 35px;
}
.left-div-one .flight input {
width: 221px;
height: 35px;
font-size: 17px;
border-radius: 4px;
border: 1px solid #CCCCCC;
}
.left-div-one .flight li {
float: left;
}
.left-div-one .flight li.flight-two {
margin-left: 30px;
}
.flight li input {
margin-left: 15px;
}
.left-div-one .book-the-ticket {
float: left;
display: block;
width: 100px;
height: 100px;
color: white;
background-color: #FF6600;
margin-left: 46px;
line-height: 100px;
text-align: center;
border-radius: 5px;
}
.main-left .left-div-two {
margin-top: 30px;
}
.left-div-two .city {
width: 875px;
height: 51px;
}
.left-div-two .city li {
float: left;
font-size: 20px;
color: #666666;
}
.left-div-two .city li:nth-child(1) {
margin-right: 25px;
}
.left-div-two .city li a:first-child {
text-decoration: none;
color: #666666;
}
.left-div-two .city li span.city-one {
padding: 5px 12px;
border-radius: 4px;
color: white;
background-color: #458B00;
}
.left-div-two .city li span {
padding: 5px 12px;
border-radius: 4px;
}
.left-div-two .city li span:hover {
padding: 5px 12px;
border-radius: 4px;
color: white;
background-color: #458B00;
}
.left-div-two .title {
width: 873px;
height: 52.6px;
line-height: 50px;
border: 1px solid #6b6161;
}
.left-div-two .title li {
float: left;
font-size: 20px;
font-weight: bold;
}
.left-div-two .title li:nth-child(1) {
margin-left: 74px;
}
.title li:nth-child(2) {
margin-left: 108px;
}
.title li:nth-child(3),
.title li:nth-child(4) {
margin-left: 58px;
}
.title li:nth-child(5) {
margin-left: 45px;
}
.title li:nth-child(6) {
margin-left: 82px;
}
.title li:nth-child(7) {
margin-left: 116px;
}
.left-div-two .reserve {
width: 875px;
height: 482px;
line-height: 50px;
}
.left-div-two .reserve li {
width: 823px;
height: 52.6px;
font-size: 20px;
color: #666666;
padding-left: 50px;
border: 1px solid #DDDDDD;
border-top: none;
}
.left-div-two .reserve li:nth-child(2),
.left-div-two .reserve li:nth-child(4),
.left-div-two .reserve li:nth-child(6),
.left-div-two .reserve li:nth-child(8) {
background-color: #FAFAFA;
}
.reserve li span:nth-child(2),
.reserve li span:nth-child(6),
.reserve li a {
margin-left: 70px;
}
.reserve li span:nth-child(3),
.reserve li span:nth-child(4),
.reserve li span:nth-child(5) {
margin-left: 45px;
}
.reserve li span:nth-child(3) {
color: #FF6600;
}
.reserve li a {
padding: 5px 20px;
color: white;
background-color: #FF6600;
border-radius: 5px;
text-decoration: none;
}
.left-div-two .more {
width: 873px;
height: 52.6px;
border: 1px solid #DDDDDD;
border-top: none;
text-align: center;
font-size: 20px;
line-height: 51.6px;
}
.left-div-two .more a {
color: #666666;
text-decoration: none;
}
/* 主体右边 */
.main .main-right {
width: 330px;
height: 1213px;
float: left;
margin-left: 15px;
margin-top: 30px;
}
.main-right .right-top {
width: 328px;
height: 312px;
border: 1px solid #EFEFEF;
}
.main-right .right-top p {
width: 318px;
height: 42px;
line-height: 42px;
font-size: 18px;
padding-left: 10px;
color: #696A6C;
background-color: #FAFAFA;
}
.right-top ul.ul-one {
width: 312px;
height: 30px;
margin-left: 18px;
margin-top: 15px;
}
.right-top ul {
width: 312px;
height: 30px;
margin-left: 18px;
margin-top: 5px;
}
.right-top li {
float: left;
}
.right-top li a {
text-decoration: none;
color: #A8A8A8;
}
.right-top li span {
display: block;
width: 84px;
height: 30px;
font-size: 15px;
line-height: 30px;
margin-left: 5px;
padding-left: 7px;
background-color: #EEEEEE;
}
.main-right .right-content {
width: 328px;
height: 675px;
border: 1px solid #EFEFEF;
margin-top: 10px;
}
.main-right .right-content p {
width: 318px;
height: 42px;
line-height: 42px;
font-size: 18px;
padding-left: 10px;
color: #696A6C;
background-color: #FAFAFA;
}
.right-content ul {
width: 328px;
height: 620px;
}
.right-content li {
width: 150px;
height: 145px;
margin-top: 10px;
margin-left: 9.5px;
float: left;
}
.right-content ul li span {
display: block;
text-align: center;
line-height: 20px;
}
.right-content ul li a {
text-decoration: none;
color: #6d6a6a;
}
.main-right .right-bottom {
width: 328px;
height: 148px;
border: 1px solid #EFEFEF;
margin-top: 10px;
}
.main-right .right-bottom p {
width: 318px;
height: 42px;
line-height: 42px;
font-size: 18px;
padding-left: 10px;
color: #696A6C;
background-color: #FAFAFA;
}
.right-bottom ul {
width: 318px;
height: 83px;
margin-top: 10px;
margin-left: 10px;
}
.right-bottom li {
width: 145px;
height: 36px;
margin-top: 5px;
margin-left: 7px;
background-color: #EEEEEE;
float: left;
}
.right-bottom li a {
text-decoration: none;
color: #C0C0C0;
}
.right-bottom li img {
float: left;
margin-top: 8px;
margin-left: 10px;
}
.right-bottom li span {
line-height: 36px;
margin-left: 7px;
}
/* 设置底部 */
.footer {
width: 100%;
height: 300px;
background-color: #222222;
}
.footer .footer-one {
width: 100%;
height: 67px;
}
.footer .footer-one li {
color: #B9C7CA;
font-size: 25px;
float: left;
margin-top: 30px;
padding-right: 264px;
padding-bottom: 10px;
border-bottom: 2px #333333 dashed;
}
.footer .footer-one li:nth-child(1) {
margin-left: 164px;
}
.footer .footer-one li:nth-child(2),
.footer .footer-one li:nth-child(3) {
margin-left: 57px;
}
.footer .footer-two,
.footer .footer-three,
.footer .footer-four {
width: 366px;
height: 223px;
margin-top: 10px;
line-height: 35px;
float: left;
}
.footer .footer-two li a,
.footer .footer-three li a,
.footer .footer-four li a {
text-decoration: none;
color: #605F60;
}
.footer .footer-two {
margin-left: 164px;
}
.footer .footer-three,
.footer .footer-four {
margin-left: 57px;
}
/* 设置底部 */
.bottom {
width: 100%;
height: 78px;
background-color: black;
}
.bottom p {
color: #B9C7CA;
text-align: center;
line-height: 78px;
}
</style>
</head>
<body>
<div class="all">
<!-- 设置导航栏 -->
<div class="nav">
<!-- 设置logo -->
<div class="nav-logo">
<img src="./飘城旅行社图片/logo.png" alt="飘城旅行社">
</div>
<ul class="nav-content">
<li><a href="./15_飘城旅行社.html"> 首页 </a></li>
<li><a href="./16_旅游资讯.html">旅游资讯</a></li>
<li class="nav-content-one"><a href="./17_机票订购.html">机票订购</a></li>
<li><a href="./18_风景欣赏.html">风景欣赏</a></li>
<li><a href="./19_公司简介.html">公司简介</a></li>
</ul>
</div>
<!-- 设置图片背景 -->
<div class="img">
<div class="img-one clearfix">
<h1>旅游资讯</h1>
<p>介绍各种最新旅游信息、资讯要闻、景点攻略等</p>
</div>
</div>
<!-- 设置主体 -->
<div class="main">
<div class="main-left clearfix">
<h2>机票预定</h2>
<div class="left-div-one">
<p>航班类型 <span>单程</span> 往返</p>
<ul class="flight">
<li class="flight-one">出发城市
<input type="text" placeholder="城市名">
</li>
<li class="flight-two">出发时间
<input type="text" placeholder="时间/日期">
</li>
</ul>
<ul class="flight">
<li class="flight-one">返回城市
<input type="text" placeholder="城市名">
</li>
<li class="flight-two">返回时间
<input type="text" placeholder="时间/日期">
</li>
</ul>
<a href="javascript:;"><span class="book-the-ticket">订票</span></a>
</div>
<h2>最新机票</h2>
<div class="left-div-two">
<ul class="city">
<li>热门城市 : </li>
<li><a href="javascript:;"><span class="city-one">北京</span></a></li>
<li><a href="javascript:;"><span>上海</span></a></li>
<li><a href="javascript:;"><span>广州</span></a></li>
<li><a href="javascript:;"><span>深圳</span></a></li>
<li><a href="javascript:;"><span>重庆</span></a></li>
<li><a href="javascript:;"><span>成都</span></a></li>
<li><a href="javascript:;"><span>杭州</span></a></li>
<li><a href="javascript:;"><span>南京</span></a></li>
</ul>
<ul class="title">
<li>路线</li>
<li>日期</li>
<li>价格</li>
<li>税费</li>
<li>餐食</li>
<li>航班</li>
<li>预定</li>
</ul>
<ul class="reserve">
<li>
<span>北京-成都</span>
<span>10-15</span>
<span>¥745</span>
<span>¥50</span>
<span> 有 </span>
<span>春秋航空</span>
<a href="javascript:;"><span>预定</span></a>
</li>
<li>
<span>北京-上海</span>
<span>10-15</span>
<span>¥479</span>
<span>¥49</span>
<span> 无 </span>
<span>南方航空</span>
<a href="javascript:;"><span>预定</span></a>
</li>
<li>
<span>北京-深圳</span>
<span>10-15</span>
<span>¥561</span>
<span>¥52</span>
<span> 有 </span>
<span>西部航空</span>
<a href="javascript:;"><span>预定</span></a>
</li>
<li>
<span>北京-杭州</span>
<span>10-15</span>
<span>¥378</span>
<span>¥36</span>
<span> 无 </span>
<span>春秋航空</span>
<a href="javascript:;"><span>预定</span></a>
</li>
<li>
<span>北京-广州</span>
<span>10-15</span>
<span>¥612</span>
<span>¥44</span>
<span> 有 </span>
<span>春秋航空</span>
<a href="javascript:;"><span>预定</span></a>
</li>
<li>
<span>北京-重庆</span>
<span>10-15</span>
<span>¥428</span>
<span>¥62</span>
<span> 有 </span>
<span>春秋航空</span>
<a href="javascript:;"><span>预定</span></a>
</li>
<li>
<span>北京-昆明</span>
<span>10-15</span>
<span>¥509</span>
<span>¥35</span>
<span> 无 </span>
<span>春秋航空</span>
<a href="javascript:;"><span>预定</span></a>
</li>
<li>
<span>北京-厦门</span>
<span>10-15</span>
<span>¥893</span>
<span>¥73</span>
<span> 有 </span>
<span>春秋航空</span>
<a href="javascript:;"><span>预定</span></a>
</li>
<li>
<span>北京-长沙</span>
<span>10-15</span>
<span>¥663</span>
<span>¥46</span>
<span> 无 </span>
<span>春秋航空</span>
<a href="javascript:;"><span>预定</span></a>
</li>
</ul>
<div class="more">
<a href="javascript:;">加载更多航班...</a>
</div>
</div>
</div>
<div class="main-right">
<div class="right-top">
<p>景点推荐</p>
<ul class="ul-one">
<li><a href="javascript:;"><span>曼谷(12)</span></a></li>
<li><a href="javascript:;"><span>东京(5)</span></a></li>
<li><a href="javascript:;"><span>西双版纳(8)</span></a></li>
</ul>
<ul>
<li><a href="javascript:;"><span>漓江(16)</span></a></li>
<li><a href="javascript:;"><span>呼伦贝尔(4)</span></a></li>
<li><a href="javascript:;"><span>首尔(9)</span></a></li>
</ul>
<ul>
<li><a href="javascript:;"><span>巴厘岛(15)</span></a></li>
<li><a href="javascript:;"><span>土耳其(22)</span></a></li>
<li><a href="javascript:;"><span>夏威夷(5)</span></a></li>
</ul>
<ul>
<li><a href="javascript:;"><span>巴厘岛(11)</span></a></li>
<li><a href="javascript:;"><span>毛里求斯(7)</span></a></li>
<li><a href="javascript:;"><span>吉普岛(4)</span></a></li>
</ul>
<ul>
<li><a href="javascript:;"><span>希腊(18)</span></a></li>
<li><a href="javascript:;"><span>法瑞意(8)</span></a></li>
<li><a href="javascript:;"><span>马尔代夫(9)</span></a></li>
</ul>
<ul>
<li><a href="javascript:;"><span>新西兰(16)</span></a></li>
<li><a href="javascript:;"><span>埃及(11)</span></a></li>
<li><a href="javascript:;"><span>迪拜(14)</span></a></li>
</ul>
<ul>
<li><a href="javascript:;"><span>斯里兰卡(7)</span></a></li>
<li><a href="javascript:;"><span>麦哈顿(3)</span></a></li>
<li><a href="javascript:;"><span>大阪(15)</span</a></li>
</ul>
</div>
<div class="right-content">
<p>热门旅游</p>
<ul>
<li>
<a href="javascript:;"><img src="./飘城旅行社图片/hot1.jpg"><span>曼谷-芭提雅6日游</span></a>
</li>
<li>
<a href="javascript:;"><img src="./飘城旅行社图片/hot2.jpg"><span>马尔代夫双鱼6日游</span></a>
</li>
<li>
<a href="javascript:;"><img src="./飘城旅行社图片/hot3.jpg"><span>海南双飞5日游</span></a>
</li>
<li>
<a href="javascript:;"><img src="./飘城旅行社图片/hot4.jpg"><span>富山大阪东京8日游</span></a>
</li>
<li>
<a href="javascript:;"><img src="./飘城旅行社图片/hot5.jpg"><span>法瑞意德12日游</span></a>
</li>
<li>
<a href="javascript:;"><img src="./飘城旅行社图片/hot6.jpg"><span>巴厘岛6日半游</span></a>
</li>
<li>
<a href="javascript:;"><img src="./飘城旅行社图片/hot7.jpg"><span>塞舌尔迪拜9日游</span></a>
</li>
<li class="content-one">
<a href="javascript:;"><img src="./飘城旅行社图片/hot8.jpg"><span>花样土耳其10日游</span></a>
</li>
</ul>
</div>
<div class="right-bottom">
<p>旅游百宝箱</p>
<ul>
<li><a href="javascript:;"><img src="./飘城旅行社图片/trea1.png"><span>天气预报</span></a></li>
<li><a href="javascript:;"><img src="./飘城旅行社图片/trea2.png"><span>火车票查询</span></a></li>
<li><img src="./飘城旅行社图片/trea3.png"><a href="javascript:;"><span>航空查询</span></a></li>
<li><a href="javascript:;"><img src="./飘城旅行社图片/trea4.png"><span>地铁线路查询</span></a></li>
</ul>
</div>
</div>
</div>
<!-- 设置底部 -->
<div class="footer">
<ul class="footer-one">
<li>合作伙伴</li>
<li>旅游FAQ</li>
<li>联系方式</li>
</ul>
<ul class="footer-two">
<li><a href="javascript:;">途游旅游网</a></li>
<li><a href="javascript:;">驴妈妈旅游网</a></li>
<li><a href="javascript:;">携程旅游</a></li>
<li><a href="javascript:;">中国青年旅行社</a></li>
</ul>
<ul class="footer-three">
<li><a href="javascript:;">旅游合同签订方式?</a></li>
<li><a href="javascript:;">儿童价是基于什么定制的?</a></li>
<li><a href="javascript:;">旅游的线路品质怎么界定的?</a></li>
<li><a href="javascript:;">单房差是什么?</a></li>
<li><a href="javascript:;">旅游保险有哪些种类?</a></li>
</ul>
<ul class="footer-four">
<li><a href="javascript:;">微博: weibo.com/ycku</a></li>
<li><a href="javascript:;">邮件: ycku@ycku.com</a></li>
<li><a href="javascript:;">地址: 江苏盐城无名路123号</a></li>
</ul>
</div>
<div class="bottom">
<p>Copyright © YCKU 飘城旅行社|苏ICP 备120110119 号|旅行社经营许可证: L-YC-BK12345</p>
</div>
</div>
</body>
</html>
四、总结
在制作网页时会要设置一个尽量设置块元素的宽度和高度,每个父元素的高度和宽度都要比较精准,必须包含住里面的所有子元素,这样设置样式是才会对其它元素的影响比较小。看到一些排列比较比较整洁的元素时会先使用列表标签制作,这些列表都有一些默认样式,引入了一个外部链表来清除这些默认样式。制作网页时得有耐心慢慢调整,先要质量在提高速度。以上的属性在我制作网页时会比较常用,就是通过这些属性慢慢调整成自己想要的样子,在制作过程中用的都是一些比较死板的东西慢慢调整,有许多比较简便的方式也许未用到,所以代码比较多,有许多可以简洁的代码需要自己慢慢去调。
清除默认样式链接:http://meyerweb.com/eric/tools/css/reset/先新建一个文件夹reset.css 后缀名为.css 将链接里面的代码复制进去,在制作网页需要清除默认样式时可以使用link引入。