第五天（渐变）

最新推荐文章于 2024-08-24 23:28:42 发布

橘子爱吃橘子

最新推荐文章于 2024-08-24 23:28:42 发布

阅读量223

点赞数 1

分类专栏： Web前端开发技术文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_50589028/article/details/127851553

版权

Web前端开发技术专栏收录该内容

9 篇文章 2 订阅

订阅专栏

文章目录

笔记

其他效果
```
 渐变
```

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 div {
 width: 200px;
 height: 200px;
 /* border: 1px solid red; */
 /* 默认渐变效果是从上到下 */
 background-image: linear-gradient(red,blue);
 
 }
 
 /* 渐变可以控制渐变⽅向 */
 div{
 background-image: linear-gradient(to right,red,blue);
 }
 
 /* 渐变可以进⾏对⻆渐变 */
 div{
 background-image: linear-gradient(to bottom right,red,blue);
 }
 
 /* 你可以通过⻆度来设置渐变*/
 div{
 background-image: linear-gradient(40deg,red,blue);
 }
 /* 可以多各种颜⾊进⾏渐变 */
 div{
 background-image: linear-gradient(40deg,red,blue,yellow,green,pink);
 }
 /* 渐变⽀持透明 */
 div{
 background-image: linear-gradient(40deg,red,rgba(255,0,0,0));
 }
 
 /* 重复性渐变 */
 div{
 background-image: repeating-linear-gradient(50deg,red,blue 20%,green
30%);
 }
 
 /* 径向渐变 */
 div{
 background-image: radial-gradient(red,blue,yellow,pink);
 }
 
 /* 重复径向渐变 */
 div{
 background-image: repeating-radial-gradient(red,yellow 10%,pink 20%);
 }
 </style>
 </head>
 <body>
 <div></div>
 </body>
</html>

多列

多列相关属性及使⽤⻅以下代码。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style>
 body{
 /* 控制有多少列，控制列数的最⼤值 */
 column-count: 3;
 /* 控制⼀列有多宽，控制列数的最⼩值 */
 column-width: 20px;
 /* 可以像给标签加边框⼀样给每⼀列加边框 */
 column-rule: 1px solid red;
 /* 可以拆分以下三个属性 */
 column-rule-width: 10px;
 column-rule-style: dashed;
 column-rule-color: rebeccapurple;
 }
 h1{
 column-span: all;
 text-align: center;
 }
 </style>
 </head>
 <body>
 <h1>匆匆</h1>
 <p style="text-indent: 32px;">我⼀直都在期待着那些英雄能够超出原本的模样，变成他们⾃
⼰想象的样⼦，可是我们所想象的其实并没有什么多好的景象，只是在这样漫天⻜舞的雪花当中能够看清
楚。这些幸福其实就是如此简单，根本就不是你所想象的那样。</p>
 </body>
</html>

字体图标

五种图标

1.正常图⽚如png，jpg。他们的有点事图像精美复杂缺点放⼤后失真。
2.svg图像他的有点是放⼤后不会失真，但是制作复杂图像困难。
3.css图像同楼上。
4.精灵图属于⽬前较好的图标解决⽅案。缺点维护性差。
5.字体图标，他是将已有的svg，css，png等图标制作成⼀个字体⽂件供开发者使⽤。

CSS的变量
变量的声明

⾸先创建⼀个变量，必须两个中划线开始（–）。CSS变量跟⼀般属性如color没有本质差别，只是color
被系统赋予内在含义。所以css的变量海被称为⾃定义属性。

怎么使⽤变量

通过var函数使⽤变量

变量的类型

变量是由类型的可以是字符串也可是数字或者像素等等带单位量，创建变量的时候应要注意他的类型，
否则可能引起引⽤上的错误。

CSS的常⻅函数

函数     描述            CSS 版本
attr() 返回选择元素的属性值。 2
calc() 允许计算 CSS 的属性值，⽐如动态计算⻓度值。 3
cubic-bezier() 定义了⼀个⻉塞尔曲线(Cubic Bezier)。 3
hsl() 使⽤⾊相、饱和度、亮度来定义颜⾊。 3
hsla() 使⽤⾊相、饱和度、亮度、透明度来定义颜⾊。 3
linear-gradient() 创建⼀个线性渐变的图像 3
radial-gradient() ⽤径向渐变创建图像。 3
repeating-lineargradient() ⽤重复的线性渐变创建图像。 3
repeating-radialgradient() 类似 radial-gradient()，⽤重复的径向渐变创建图像。 3
rgb() 使⽤红(R)、绿(G)、蓝(B)三个颜⾊的叠加来⽣成各式各
样的颜⾊。 2
rgba() 使⽤红(R)、绿(G)、蓝(B)、透明度(A)的叠加来⽣成各式
各 样的颜⾊。 3
var() ⽤于插⼊⾃定义的属性值。 3

常⻅的CSS单位和倒影

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
第五章 ⻚⾯布局
表格布局：表格当前的互联⽹环境下，已经被淘汰，因为他的可维护性交叉，通常要修改其中某⼀个区域的时
候，会影响到全局，到最后不得不重新设计⻚⾯。
盒⼦模型：也就是我们常⽤div+CSS的布局形式，它是当前互联⽹环境中最常⽤的布局⽅式。
5.1弹性盒⼦
⾸先要使⽤弹性盒⼦ 第⼀个应该将display设置为flex。
flex-direction属性：它是⽤来控制⼦元素的排列⽅式，可以横向或者纵向排列。
 row|row-reverse|column|column-revers
justify-content属性：控制⼦元素在主轴上如何布局的。
flext-start:在横向左对⻬ 在纵向上对⻬。
flex-end：在横向上右对⻬ 纵向下对⻬。
center：居中
space-between：在横向或者纵向上均匀的排列⼦标签。
 <title></title>
 <sTyLe>
 html{
 
 }
 :root{
 
 }
 div{
 --size:200;
 width: calc(var(--size)*1px);
 height:calc(var(--size)*1px);
 border: 1px solid red;
 background-color: hsl(235, 60%, 50%);
 -webkit-box-reflect: below 2px linear-gradient(transparent,transparent
50%,rgba(255,0,0,1));
 /* -webkit-box-reflect:below 2px lineargradient(transparent,transparent 50%,rgba(0,0,0,1)); */
 }
 span{
 
 }
 </style>
 </head>
 <body>
 <div>
 
 </div>
 </body>
</html>

第五章⻚⾯布局

表格布局：表格当前的互联⽹环境下，已经被淘汰，因为他的可维护性交叉，通常要修改其中某⼀个区域的时
候，会影响到全局，到最后不得不重新设计⻚⾯。
盒⼦模型：也就是我们常⽤div+CSS的布局形式，它是当前互联⽹环境中最常⽤的布局⽅式。

5.1弹性盒⼦

⾸先要使⽤弹性盒⼦第⼀个应该将display设置为flex。
flex-direction属性：它是⽤来控制⼦元素的排列⽅式，可以横向或者纵向排列。
row|row-reverse|column|column-revers

justify-content属性：控制⼦元素在主轴上如何布局的。
flext-start:在横向左对⻬在纵向上对⻬。
flex-end：在横向上右对⻬纵向下对⻬。
center：居中
space-between：在横向或者纵向上均匀的排列⼦标签。

align-item:⽤来设置弹性盒⼦在侧轴上的对⻬⽅式。
flext-start：当前布局为横向时控制⼦项向上对⻬。当前布局为纵向时控制⼦项向左对⻬。
flex-end：当前布局为横向时控制⼦项向下对⻬。当前布局为纵向时控制⼦项向右对⻬。
center：居中。
baseline：内容部分对⻬。
strech：如果没有⾼度限制该属性会将⼦标签填满⽗容器。
flex-wrap
：⽤来设置弹性盒⼦的换⾏模式，wrap多⾏，nowrap单⾏，wrap-reverse多⾏逆序。
align-content
：他是在多⾏模式下才能体现效果的属性，他会顶掉align-item的效果

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style>
 .container{
 display: flex;
 width: 400px;
 height: 400px;
 background-color: rebeccapurple;
 flex-direction: row;
 justify-content: flex-start;
 align-items: center;
 flex-wrap:wrap;
 align-content: flex-start;
 }
 .container > div{
 width: 100px;
 height:100px;
 background-color: red;
 border: 1px solid black;
 }
 </style>
 </head>
 <body>
 <div class="container">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 </div>
 </body>
</html>

练习题目（使用实现学校官网的首页面）

为了隐私我就没有放学校官网，这里我仿了淘宝into you的页面

HTML代码图：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>指尖唇釉镜面显色秋冬口红持久滋润显白平价</title>
	<link rel="stylesheet" type="text/css" href="into.css">
</head>
<body>
   <div id="head">
   	 <center><p style="font-family: 黑体;font-size: 100px;color: #966d95;list-style: none;">INTO YOU</p></a></center>
   	 <div id="div1">
   	<ul>
   		<a href="https://item.jd.com/10037741964287.html"><li>所有产品</li></a>
   		<a href="https://item.jd.com/10037741964287.html"><li>首页</li></a>
   		<a href="https://item.jd.com/10037741964287.html"><li>唇部产品</li></a>
   		<a href="https://item.jd.com/10037741964287.html"><li>眼部产品</li></a>
   		<a href="https://item.jd.com/10037741964287.html"><li>脸部产品</li></a>
   		<a href="https://item.jd.com/10037741964287.html"><li>品牌故事</li></a>
   		<a href="https://item.jd.com/10037741964287.html"><li>会员中心</li></a>
   	</ul>
     </div>
       <img style="margin-top: 30px;border: solid #f5f5f5 2px;width:29%;" src="img/2.jpg">
     <div id="div2">
     	</br></br>
      <p>
      	<span style="color:white;background-color: #258f04;font-size: 50px;">新品</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 50px;color:#767876; ">INTO YOU指尖唇釉镜面显色秋冬口红持久滋润显白平价 哑光-E04</span>
      </p>
         <div id="div3">
         	<p style="color:  #858180;font-size: 50px;">价&nbsp;&nbsp;格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<s><span style="color: #767876;font-size: 60px;width: 20px;">￥98.00--￥180.00</s></span></br></p>
         	<p style="color:  #858180;font-size: 50px;">促销价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f66351;font-size: 60px;width: 20px;">￥50.00--￥169.00</span></p></br></br></br></br></p>
         	<p style="color: #686666;font-size: 50px;">运&nbsp;&nbsp;费</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #767876;font-size: 50px;width: 20px;">浙江嘉兴&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;四川&nbsp;&nbsp;&nbsp;&nbsp;快递：0.00</span></p>
         	<p style="border-top: #c6bebe solid 2px;margin-top: 40px;"></p>
         	<p align="center" style="color:  #858180;font-size: 50px;float: left; border-right: solid 2px  #c6bebe  ;width: 33%;margin-top: 20px;">月销量&nbsp;&nbsp;<span style="color: #f66351;font-size: 60px;width: 20px;">30万+</span></p>
         	<p align="center" style="color:  #858180;font-size: 50px;float: left; border-right: solid 2px  #c6bebe  ;width: 33%;margin-top: 20px;">累计评价&nbsp;&nbsp;<span style="color: #f66351;font-size: 60px;width: 20px;">150万+</span></p>
         	<p align="center" style="color:  #858180;font-size: 50px;float: left; border-right: solid 2px  white ;width: 33%;margin-top: 20px;">送天猫积分 &nbsp;&nbsp;<span style="color: #56b609;font-size: 60px;width: 20px;">29</span>起</p>
           <p style="border-top: #c6bebe solid 2px;margin-top: 150px;"></p>
            <p style="color:  #858180;font-size: 50px;margin-top: 30px;">版&nbsp;&nbsp;本</p>
           	  <div id="div5">
              <ul>
              	<a href="https://item.jd.com/10037741964287.html"><li>摩尔唇泥</li></a>
              	<a href="https://item.jd.com/10037741964287.html"><li>水雾唇釉</li></a>
              	<a href="https://item.jd.com/10037741964287.html"><li>女主角唇泥</li></a>
              	<a href="https://item.jd.com/10037741964287.html"><li>指尖唇釉</li></a>
              </ul>
              </div>
           <p style="color:  #858180;font-size: 50px;margin-top: 150px;">颜色分类
           	  <div id="div6">
           <a href="https://item.jd.com/10037741964287.html"><li><img style="width:300%;margin-top: 50px;" src="img/3.jpg"></li></a>
           <a href="https://item.jd.com/10037741964287.html"><li><img style="width:300%;margin-top: 50px;" src="img/4.jpg"></li></a>
           <a href="https://item.jd.com/10037741964287.html"><li><img style="width:300%;margin-top: 50px;" src="img/5.jpg"></li></a>
           <a href="https://item.jd.com/10037741964287.html"><li><img style="width:300%;margin-top: 50px;" src="img/6.jpg"></li></a>
           </p> 
              </div> 
           <p style="color:  #858180;font-size: 50px;">数&nbsp;&nbsp;量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>1&nbsp;&nbsp;件</span></p>
              <div id="div7">
              	<ul>
              		<a href="https://item.jd.com/10037741964287.html"><li>立即购买</li></a>
              		<a href="https://item.jd.com/10037741964287.html"><li>加入购物车</li></a>
                </ul>
             </div>
     </div>
   </div>
     <div  id="div8">
     	   <center><p style="font-family: 黑体;font-size: 100px;color: #966d95;list-style: none;">INTO YOU</p></a></center>
     </div>
     <div id="div9">
     <p align="center" style="color:  #858180;font-size: 50px;">&nbsp;&nbsp;<span style="color: #959494;">intoyou旗舰店</span></p></br></br>
     <p align="center" style="color:  #858180;font-size: 50px;text-decoration: none;list-style: none;"><a style="list-style: none;text-decoration: none;" href="#">描&nbsp;&nbsp;述&nbsp;&nbsp;服&nbsp;&nbsp;务&nbsp;&nbsp;物&nbsp;&nbsp;流</a></p></br></br>
     <p align="center" style="color:  #858180;font-size: 50px;">4.8&nbsp;&nbsp;<span style="color: green;">↑</span>&nbsp;&nbsp;4.7&nbsp;&nbsp;<span style="color: red;">↑</span>&nbsp;&nbsp;4.9&nbsp;&nbsp;<span style="color: green;">↑</span></p></br>
       <div id="div10">
              	<ul>
              		<center><a href="https://item.jd.com/10037741964287.html"><li>进店逛逛</li></a></center>
              		<a href="https://item.jd.com/10037741964287.html"><li >收藏店铺</li></a>
                </ul>
      </div>
                <div style="border: solid 2px #b4b0b0;" id="div11">
           	  	   	<p style="color:  #858180;font-size: 50px;">产品分类</p></br>
           	  	   	<a style="list-style: none;text-decoration: none;" href="https://item.jd.com/10037741964287.html"><p align="center" style="color:  #858180;font-size: 50px; margin-top: 20px;"> 脸部产品:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #fc7536">唇泥</span></p></br></a> 
           	  	   	<a style="list-style: none;text-decoration: none;" href="https://item.jd.com/10037741964287.html"><p align="center"  style="color:  #858180;font-size: 50px; margin-top: 20px;">眼部产品:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #fc7536">眼影</span></p></br></a>
           	  	   	<a style="list-style: none;text-decoration: none;" href="https://item.jd.com/10037741964287.html"><p align="center"  style="color:  #858180;font-size: 50px; margin-top: 20px;">唇部产品:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #fc7536">口红</span></p></br></a>
           	  	   <a style="list-style: none;text-decoration: none;" href="https://item.jd.com/10037741964287.html"><p align="center"  style="color:  #858180;font-size: 50px; margin-top: 20px;"> 卸妆产品:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #fc7536">卸妆水</span></p></br></a>
                 </div>          
     </div>
     <div id="div12">
     	<div id="div12-1">
     	<p style="color:  #858180;font-size: 50px;">产品介绍</p></br>
        </div>
        <div id="div12-2">
            <p style="color:#c8c3c2;font-size: 60px;">产品参数</p></br>
        </div>
        <div id="div12-3">
            <p style="color:  #858180;font-size: 50px;"> 产品名称：INTO YOU INTOYOU心慕</p></br>
            <p style="color:  #858180;font-size: 50px;"> 产地: 中国</p></br>
            <p style="color:  #858180;font-size: 50px;"> 上市时间: 2020年</p></br>
            <p style="color:  #858180;font-size: 50px;"> 是否为特殊用途化妆品: 否</p></br>
        </div>
        <div id="div12-4">
            <p style="color:  #858180;font-size: 50px;"> 品牌: INTO YOU</p></br>
            <p style="color:  #858180;font-size: 50px;"> 颜色分类: W01 蜜桃荔枝饮 W02 树莓</p></br>
            <p style="color:  #858180;font-size: 50px;"> 
功效: 提升气色 不粘杯 持久</p></br>
            <p style="color:  #858180;font-size: 50px;"> 限期使用日期范围: 2023-04-11至2023-07-11</p></br>
        </div>
        </div>
            <div id="div13">
            <p style="font-size: 50px;">消费提醒： 国家药监局提示您：化妆品不能宣称医疗作用，也没有治疗作用，宣称治疗儿童湿疹等皮肤病的产品不属于化妆品。</p>
             </div>
             <div id="div14">
             	<div id="div14-1">
             	<p style="color:  #858180;font-size: 50px;">累计评价</p></br>
               </div>
               <div id="div14-2">
                 	<p style="color:#858180;font-size: 50px;">与描述相符</p>
           	       <p style="color:#858180;font-size: 50px;"><span style="color: #ff7a4d;font-size:50px;width: 30px;">4.6</span></p>
           	       <p style="color:#858180;font-size: 50px;" ><span style="color: yellow;">★★★★★</span></p>
               </div>
                <div id="div14-3">
                   <ul>
                     <p style="color:#858180;font-size: 100px;"><li><a href="#">非常不满意（5）</a></li></p>
     	  	         <p style="color:#858180;font-size: 100px;"><li><a href="#">不满意（2）</a></li></p>
     	  	         <p style="color:#858180;font-size: 100px;"><li><a href="#">一般（2）</a></li></p>
     	  	        <p style="color:#858180;font-size: 100px;"> <li><a href="#">满意（2）</a></li></p>
     	  	        <p style="color:#858180;font-size: 100px;"> <li><a href="#">非常满意（10）</a></li></p>
                   </ul>
           	     </div>
           	     <div id="div14-4">
             	       <div id="div14-4-1">
                       <p style="color:#858180;font-size: 50px;">颜色实测还是适合皮肤偏白的比较好看些～,也太好看了吧,在手臂试色倒是有点水光感,从上到下是01,大爱唇釉的质地,正品！整体评价好保湿效果还行,原相机拍摄,,w02一个是橡皮粉,不吃东西的时候不会掉色,真的变白了,很好的染唇液爱了..
                       </p>
                      <img style="width: 200px;" src="img/7.jpg">></br>
                       </div>
                       <div id="div14-4-2">
                       <p style="color:#858180;font-size: 50px;">颜色分类：W01 蜜桃荔枝饮</p>
                       </div>
                       <div id="div14-4-3">
                       <p style="color:#858180;font-size: 50px;">x***0（匿名）<span style="color: #ea9f08;">超级会员</span></p>
                       </div>
                       <div id="div14-4-4">
                       <p style="color:#858180;font-size: 50px;">颜色实测还是适合皮肤偏白的比较好看些～,也太好看了吧,在手臂试色倒是有点水光感,从上到下是01,大爱唇釉的质地,正品！整体评价好保湿效果还行,原相机拍摄,,w02一个是橡皮粉,不吃东西的时候不会掉色,真的变白了,很好的染唇液爱了..
                       </p>
                      <img style="width: 200px;" src="img/8.jpg">></br>
                       </div>
                       <div id="div14-4-5">
                       <p style="color:#858180;font-size: 50px;">颜色分类：W08 粉提荔枝饮</p>
                       </div>
                       <div id="div14-4-6">
                       <p style="color:#858180;font-size: 50px;">q***n（匿名）<span style="color: #ea9f08;">超级会员</span></p>
                       </div>
            </div>
             <div id="div15">
             	<div id="div12-1">
            	<p style="color:  #858180;font-size: 50px;">图片详情</p></br>
                </div>
            	<div id="div15-1">
            		<center><img style="width:900px;" src="img/9.jpg"></center></br>
            		<p align="center" style="color:  #858180;font-size: 50px; font-family: 黑体">礼盒</p>
            	</div>
            	<div id="div15-1">
            		<center><img style="width:850px;" src="img/11.jpg"></center></br>
            		<p align="center" style="color:  #858180;font-size: 50px; font-family: 黑体">色号展示</p>
            	</div>
            	<div id="div15-1">
            		<center><img style="width:680px;" src="img/12.jpg"></center></br>
            		<p align="center" style="color:  #858180;font-size: 50px; font-family: 黑体">效果展示</p>
            	</div>
            	 <div style="margin-top: -800px;" id="div13">
                 <center><p style="font-family: 黑体;font-size: 100px;color: #966d95;list-style: none;">INTO YOU</p></a></center>
                 </div>
                </div>
            </div>
            </div>
</body>
</html>

CSS图：

*
{
	margin: 0 auto;
	padding:0 auto;
	list-style: none;
}
#head
{
	/*border: solid #f5f5f5 2px;*/
	width: 3000px;
	height: 6300px;
	text-decoration: none;
}
#div1
{
	float: left;
	font-size: 50px;
	width: 100%;
	height: 100px;
	background: #9da29d;;
	margin-top: 20px;
	border-bottom: #b7bcb7 solid 2px;
	text-decoration: none;
}
#div1 li
{
	float: left;
	margin-left:200px;
	line-height: 100px;

}


#div2
{
	border: solid #b7bcb7  2px;
	width: 65%;
	height:1500px;
	float: right;
	margin-top: 20px;

}
#div3
{
	background: url("img/index.png");
	width: 100%;
	height: 180px;
	margin-top: 30px;

}
#div5
{
	float: left;
	font-size: 50px;
	width: 100%;
	height: 75px;
	border-bottom: white solid 2px;
	text-decoration: none;
}
#div5 li
{
	float: left;
	margin-left:200px;
	line-height: 100px;
	margin-top: -80px;

}
#div6
{
	float: left;
	font-size: 50px;
	width: 100%;
	height: 200px;
	border-bottom: white solid 2px;
	text-decoration: none;
}
#div6 li
{
	float: left;
	margin-left:250px;
	line-height: 100px;
    margin-top: -150px;

}
#div7
{
	float: left;
	font-size: 50px;
	width: 100%;
	height: 200px;
	text-decoration: none;
}
#div7 li
{
	float: left;
	margin-left:500px;
	line-height: 100px;
    margin-top: 100px;
    border: black solid 2px;
    background: #fcbcba;
}
#div8
{
	text-decoration: none;
	width: 30%;
	height:500px;
	float:left;
	margin-top: 90px;

}
#div9
{
	border: solid #b4b0b0 2px;
	width:30%;
	height:450px;
	text-decoration: none;
	float:left;
	margin-top: 340px;
	margin-left: -900px;
}
#div10
{
	float: left;
	font-size: 50px;
	width: 100%;
	height: 200px;
	text-decoration: none;
	margin-left: -60px;
}
#div10 li
{
	float: left;
	margin-left:200px;
	line-height: 100px;
    margin-top: 10px;
    border: black solid 2px;
    background: #fcbcba;
}
#div11
{
    border: #f0eae8 solid 1px;
	width:100%;
	height: 80px;
	float: left;
	margin-top: 10px;
	background:#f0eae8;
}
#div12
{
	 border: #f0eae8 solid 1px;
	width:65%;
	height:800px;
	float: right;
	margin-top:100px;
/*	background:#f0eae8;*/
}
#div12-1
{
	background:#f0eae8;
}
#div12-2
{
  margin-top: 20px;
}
#div12-3
{
  margin-top: 20px;
  width: 33%;
  height: 500px;
  /*border:red solid 2px ;*/
  float: left;
}
#div12-4
{
 
  width: 33%;
  height: 500px;
  /*border:red solid 2px ;*/
  float: right;
}
#div13
{
 
  
    border: white solid 1px;
	width:100%;
	height: 150px;
	float: left;
	margin-top: 300px;
	background:#fef4f4;
	line-height: 150px;
	color: #f1a127;
	text-indent: 2em;
}
#div14
{
   
    border: #f0eae8 solid 1px;
	width:100%;
	height:1600px;
	float: left;
	margin-top: 10px;
	/*background:#f0eae8;*/
	margin-top: 50px;
}
#div14-1
{
	background:#f0eae8;
	 border: #f0eae8 solid 1px;
	width:100%;
	height:100px;
	

}
#div14-2
{
	margin-top: 20px;
	text-align: center;
	width: 20%;
	float: left;
	height: 150px;
}
#div14-3
{
	margin-top: 40px;
	text-align: center;
	width: 70%;
	float:left;
	height: 150px;
	line-height: 150px;
	background:#fef4f4;
}
#div14-3 ul{ width: 100%;
   list-style: none;
   }
#div14-3 li {
   	
   	float: left;
   text-align: center;
    margin-left: 100px;
    font-size: 50px;
   }
 #div14-3 li a 
{
	text-decoration:none;
	color: black;
	line-height: 38px;
}
#div14-4
{
	margin-top: 20px;
	width: 100%;
	height: 800px;
	/*border:red solid 1px;*/
}
#div14-4-1
{
	margin-top: 30px;
	width: 50%;
	height: 180px;
	float: left;
}
#div14-4-2
{
	margin-top: 30px;
	width: 20%;
	height: 180px;
	float: left;
	margin-left: 100px;
}
#div14-4-3
{
	margin-top: 30px;
	width: 24%;
	height: 180px;
	float: right;
}
#div14-4-4
{
	border-top:  #f0eae8 solid 1px;
	margin-top: 500px;
	width: 50%;
	height: 180px;
	float: left;
}
#div14-4-5
{
	margin-top:500px;
	width: 20%;
	height: 180px;
	float: left;
	margin-left: 100px;
	border-top:  #f0eae8 solid 1px;
}
#div14-4-6
{
	margin-top:500px;
	width: 24%;
	height: 180px;
	float: right;
	border-top:  #f0eae8 solid 1px;
}
#div15
{
	
	width: 100%;
	height: 2000px;
	margin-top: 800px;
}
#div15-1
{

	width: 33%;
	height: 2000px;
	margin-top:50px;
	float: left;
}

效果截图

在这里插入图片描述

项目反思：

通过仿照页面我发现我的代码有以下问题：

1、div命名不规范
2、代码格式不规范
3、按钮设置样式不好看（下次可以改进）

下次一定注意！！！

橘子爱吃橘子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
第五天（渐变）

渐变多列多列相关属性及使⽤⻅以下代码。字体图标五种图标CSS的变量变量的声明⾸先创建⼀个变量，必须两个中划线开始（–）。CSS变量跟⼀般属性如color没有本质差别，只是color被系统赋予内在含义。所以css的变量海被称为⾃定义属性。通过var函数使⽤变量变量是由类型的可以是字符串也可是数字或者像素等等带单位量，创建变量的时候应要注意他的类型，否则可能引起引⽤上的错误。常⻅的CSS单位和倒影第五章⻚⾯布局表格布局：表格当前的互联⽹环境下，已经被淘汰，因为他的可维
复制链接

扫一扫