小米菜单
思路分析
最外层分析
根据需求图，设置背景颜色；及页面内居中
<!--big为代指大盒子-->
<div id="big">
<!--上半部分的盒子-->
<div id="top">
</div>
<!--下半部分的盒子-->
<div id="bottom">
</div>
</div>
样式设置：
<!--进行设置之前，需要对浏览器默认盒模型的设置进行清除-->
*{
margin: 0;
padding: 0;
}
#big{
width: 1250px;
height: 690px;
background-color: gainsboro;<!--设置背景颜色为灰色-->
margin: 10px auto;//margin<!--上下边距为10像素，左右于网页自适应居中-->
}
上半部分分析
根据需求图，上半部分又可以分为两个部分：
一个为“手机”文本标签；
一个为“查看全部”链接标签
文本标签 span
右部分需要两个链接标签，一放置“查看全部”，二放置“>”；
将 a 链接标签设置为右浮动
<div id="top">
<span>手机</span>
<a href="">></a><!--">"放在前面，浮动是按照顺序将标签位移-->
<a href="">查看全部</a>
</div>
样式：
<!--给两个链接设置基本属性-->
#top>a{
float: right;<!--设置右浮动-->
text-decoration: none;<!--去除下划线-->
text-align: center;<!--设置文本居中-->
line-height: 27px;<!--行高-->
color: black;
margin: 5px 0px 0px 0px ;<!--设置上边距5像素-->
}
/* 设置圆角按钮 */
#top>a:nth-child(2){<!--结构伪类，选中第二个a链接-->
color: white;
width: 30px;<!--高、宽相等，圆角才能变成一个正圆形-->
height: 30px;
background-color: gray;
border-radius: 50% ;<!--设置背景色的圆滑度-->
}
/* 设置浮动效果 */
#top>a:nth-child(2):hover{
background-color: orangered;
}
/* 设置查看 */
#top>a:nth-child(3){
width: 100px;
height: 30px;
}
/* 设置查看链接的浮动 */
#top>a:nth-child(3):hover{
color: orangered;
}
下半部分
根据需求图，最左边为一张长图，高度=右边两张图片高度相加 + 之间的间隔
而图片上有文字，说明其为背景图片
使用 ul 无序列表完成：
图片部分
<div id="bottom">
<ul>
<a href="">
<li id="bigbig"><!--与众不同的第一张图片起个id进行区分-->
</li>
</a>
<a href="">
<li>
</li>
</a>
<a href="">
<li>
</li>
</a>
<a href="">
<li>
</li>
</a>
<a href="">
<li>
</li>
</a>
<a href="">
<li>
</li>
</a>
<a href="">
<li>
</li>
</a>
<a href="">
<li>
</li>
</a>
<a href="">
<li>
</li>
</a>
</ul>
</div>
设置样式：
#bottom{
width: 1250px;
height: 630px;
}
/* 设置大容器的外边距 */
#bottom>ul{
margin: 20px 6px 10px 10px ;
}
/* 左边大图片属性 路径 */
#bigbig{
width: 236px;
height: 612px;
background-image: url(../XmImg/d1.png);
}
/* 设置小容器的属性 */
li{
margin: 6px;<!--上、下边距为6像素-->
list-style: none;<!--去除无序列表前的小圆点-->
float:left;<!--设置左浮动-->
background-repeat: no-repeat;<!--图片不重复-->
background-color: white;
width: 234px;
height: 300px ;
text-align: center;
}
/* 小容器浮动属性 */
li:hover{
box-shadow: 5px 5px 5px grey;<!--暂时只有浮动阴影-->
}
/* 小图片路径 */
#bottom>ul>a:nth-child(2) li{
background-image: url(../XmImg/e1.png);
}
#bottom>ul>a:nth-child(3) li{
background-image: url(../XmImg/e2.png);
}
#bottom>ul>a:nth-child(4) li{
background-image: url(../XmImg/e3.png);
}
#bottom>ul>a:nth-child(5) li{
background-image: url(../XmImg/e4.png);
}
#bottom>ul>a:nth-child(6) li{
background-image: url(../XmImg/e5.png);
}
#bottom>ul>a:nth-child(7) li{
background-image: url(../XmImg/e6.png);
}
#bottom>ul>a:nth-child(8) li{
background-image: url(../XmImg/e7.png);
}
#bottom>ul>a:nth-child(9) li{
background-image: url(../XmImg/e8.png);
}
文字部分
分为：品名、描述、价格、原价四种文字样式；给出不同的类名
<a href="">
<li>
<p class="pm">小米8 青春版4GB+64GB</p>
<p class="ms">潮流镜面渐变色,2400自拍旗舰</p>
<p class="poice">1399 元
<span class="yj">
1499 元
</span>
</p>
</li>
</a>
样式：
/* 文字定位：文字现在的默认状态是在小容器的上半部分处于居中状态 */
#bottom li>p{
position:relative; <!--相对定位：相对于当前位置进行位移-->
top:200px;<!--距离上边位移200px-->
line-height: 30px;<!--行高-->
}
/* 品名字体 */
.pm{
font-family: "宋体";
}
/* 描述属性 */
.ms{
color: rgb(183, 181, 181);
font-size: 12px;
}
/* 价格属性 */
.poice{
font-size: 20px;
color: rgb(255, 98, 0);
}
/* 原价属性 */
.yj{
font-size: 12px;
color: gray;
text-decoration: line-through;<!--删除线-->
}
汽车简约界面
思路分析
导航部分
分左右两部分；设置不同的类名区分选中
<!-- 导航部分 -->
<div id="DaoHang">
<ul>
<a href="" class="left">
<li>品牌></li>
</a>
<a href="" class="left">
<li>车型></li>
</a>
<a href="" class="left">
<li>新闻</li>
</a>
<a href="" class="left">
<li>售后支持></li>
</a>
<a href="" class="right">
<li>经销商查询</li>
</a>
<a href="" class="right">
<li>试驾</li>
</a>
</ul>
</div>
设置样式：
*{
margin: 0;
padding: 0;
}
/* 顶部导航部分 */
li{
list-style: none;
}
a{
text-decoration: none;
}
#DaoHang a{
width: 150px;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
font-family: "宋体";
}
#DaoHang a:hover{
background-color: rgb(216, 216, 216);
color: black;
text-shadow: 3px 3px 3px gray;
}
#DaoHang{
overflow:hidden;
width: 100%;
height: 50px;
background-color: rgb(27, 27, 27);
}
#DaoHang .left{
float: left;
}
#DaoHang .right{
float: right;
}
展示部分
放入图片；
暂时设置左下角按钮样式
<div id="XuanChuan">
<a href="4399.com">
<img src="图片路径" alt="图片加载失败">
</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
设置样式：
/* 宣传部分 */
#XuanChuan li{
margin: 0px 10px;//小按钮左右边距
width: 30px;
height: 30px;
font-size: 20px;
background-color: white;
border-radius: 50%;//设置圆角
float: left;//左浮动
text-align: center;
line-height: 30px;
position: relative;//相对定位
bottom: 100px;
left: 50px;
}
#XuanChuan li:hover{
background-color: black;
font-weight: 900;
color: white;
}
车型部分
大肠包小肠
<!-- 展示车型 -->
<div id="CheXing">
<p>车型<span>每一辆玛莎拉蒂均采用手工工艺精雕细琢</span></p>
<ul>
<li>
<p class="t">新Ghibli轿车系列</p>
<p>唤醒不说自我</p>
<img src=".图片路径" alt="图片加载失败">
<p>建议零售价</p>
<p class="t">72.58万RMB起</p>
<a href="" class="ljgd">了解更多</a>
<a href="" class="zs">定制您的专属</a>
</li>
<li>
<p class="t">新Levante SUV系列</p>
<p>探寻天地边界</p>
<img src="图片路径" alt="图片加载失败">
<p>建议零售价</p>
<p class="t">72.58万RMB起</p>
<a href="" class="ljgd">了解更多</a>
<a href="" class="zs">定制您的专属</a>
</li>
<li>
<p class="t">MC20</p>
<p>无界 先行</p>
<img src="图片路径" alt="图片加载失败">
<p>建议零售价</p>
<p class="t">72.58万RMB起</p>
<a href="" class="ljgd">了解更多</a>
<a href="" class="zs">定制您的专属</a>
</li>
<li>
<p class="t">新Quattroporte总裁轿车系列</p>
<p>演绎意式风雅</p>
<img src="图片路径" alt="图片加载失败">
<p>建议零售价</p>
<p class="t">72.58万RMB起</p>
<a href="" class="ljgd">了解更多</a>
<a href="" class="zs">定制您的专属</a>
</li>
</ul>
</div>
<!--页面缩小时图片会进行重叠，暂未设置-->
样式设置：
#CheXing>p{
width: 100%;
height: 50px;
background-color: gray;
position: relative;
bottom: 35px;
line-height: 50px;
font-size: 30px;
text-indent: 5em;
}
#CheXing>p>span{
display: inline-block;
font-size: 16px;
}
#CheXing li{
float: left;
width: 25%;
height: 500px;
}
#CheXing li:hover{
box-shadow: 4px 4px 8px gray;
}
#CheXing img{
height: 200px;
}
.t{
font-family:900;
font-size: 25px;
}
#CheXing>ul p{
text-align: center;
line-height: 40px;
}
#CheXing>ul a{
display: block;
text-align: center;
margin: 0 auto;
width: 150px;
height: 30px;
line-height: 30px;
}
.ljgd{
border: 2px solid black;
}
.ljgd:hover{
border-bottom: 0;
color: white;
background-color: black;
}
.zs{
border: 2px solid black;
background-color: black;
color: white;
}
.zs:hover{
border-top: 0;
color: black;
background-color: white;
}
展示部分
同上
<div id="CheKuang">
<p>玛莎拉蒂的世界</p>
<ul>
<li>
<img src="图片路径" alt="">
</li>
<li>
<img src="图片路径" alt="">
</li>
<li>
<img src="图片路径" alt="">
</li>
<li>
<img src="图片路径" alt="">
</li>
</ul>
</div>
设置样式：
#CheKuang>p{
font-size: 50px;
text-indent: 2em;
}
#CheKuang>ul{
margin: 0px 0px 500px 100px;
}
#CheKuang li{
width: 20%;
float: left;
}
#CheKuang li:hover{
box-shadow: 5px 5px 10px black;
}
#CheKuang img{
width: 300px;
height: 200px;
}
底部导航
<!-- 底部导航 -->
<div id="DiBu">
<ul>
<li>
<img src="./img/二维码.PNG" alt="">
</li>
<li>
<pre>
车型
新Ghibli轿车系列
新Levante SUV系列
新Quattroporte总裁轿车系列
MC20
</pre>
</li>
<li>
<a href="">关注我们</a><br>
<a href="" id="dblj">了解玛莎拉蒂更多消息</a>
</li>
<li>
<img src="./img/微信.png" alt="">
<img src="./img/微博.png" alt="">
<img src="./img/bil.png" alt="">
</li>
</ul>
</div>
设置样式：
/* 底部导航 */
#DiBu{
width: 100%;
height: 80px;
background-color: black;
}
div::after{
content: "";
display: block;
clear: both;
}
#DiBu li {
width: 25%;
float: left;
}
#DiBu img{
margin: 0 auto;
width: 50px;
height: 50px;
border-bottom: 2px solid white;
position: relative;
top: 10px;
left: 20px;
}
#DiBu a{
line-height: 30px;
color: white;
}
#DiBu pre{
color: white;
font-size: 10px;
}
#dblj{
width: 180px;
height: 20px;
border: 1px solid white;
}
待优化…
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
