使用div技术写出商城首页
使用div技术写出商城首页的几个技术点:
- div技术 css浮动和盒子模型
css浮动关键字属性名称float 属性值:left、right,css浮动框,因为不在文档流当中,所以普通框无视浮动框(重合),想要不重合,就要清除浮动,解决方案,就是创建一个div直接清除浮动即可
/清除浮动/
#clear{
clear: both;
}
盒子模型关键字(有很多我只是举例代表) 属性padding:表示的是内间距 margin:表示的是外间距
2. 选择器 基本的选择器 (id选择器 类选择器 元素选择器)
id选择器: #id名称
类选择器: .类名称
元素选择器: html中的所元素既可以
层级选择器: 举例列表标签 ul il
属性选择器: 举例表单标签 input[name=“username”]
-
将列表标签内容改为内联方法
ul li{
/列表标签改为内联(行专列)/
display:inline;
} -
去除超链接的下划线
a{
/去除超链接的下划线/
text-decoration:none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#page{
/*border:1px solid red;*/
width:1320px;
height:1244px;
margin:auto;
}
#titleBar{
/*border:1px solid blue;*/
width:1320px;
height:45px;
}
.titleBar_one{
/*border:1px solid black;*/
width:438px;
height:45px;
/*所有标题框向左浮动*/
float:left;
}
#titleBar_one_col{
padding-top:10px;
}
ul li{
/*列表标签改为内联(行专列)*/
display:inline;
}
#menu{
/*border:1px solid green;*/
width:1320px;
height:45px;
background:black;
}
.ul_li{
color:white;
}
#lunbo{
/*border:1px solid red;*/
width:1320px;
height:500px;
}
#new_product{
/*border:1px solid black;*/
width:1320px;
height:450px;
}
#new_product_top{
/*border:1px solid blue;*/
width:1320px;
height:33px;
padding-top:12px;
}
#new_product_buttom{
/*border:1px solid red;*/
width:1320px;
height:400px;
}
#new_product_buttom_left{
/*border:1px solid black;*/
width:240px;
height:400px;
float:left;
}
#new_product_buttom_right{
/*border:1px solid green;*/
width:535px;
height:200px;
float:left;
}
.new_product_buttom_right_item{
/*border:1px solid blue;*/
width:177px;
height:200px;
float:left;
}
#gaungao{
/*border:1px solid green;*/
width:1320px;
height:130px;
}
a{
/*去除超链接的下划线*/
text-decoration:none;
}
</style>
</head>
<body>
<div id="page">
<div id="titleBar">
<div class="titleBar_one">
<img id="titleBar_one_col" src="../../img/logo2.png" width="300px" height="30px"/>
</div>
<div class="titleBar_one" align="center">
<img src="../../img/header.png" width="400px" height="45px"/>
</div>
<div class="titleBar_one">
<ul>
<a href="#"><li>登录</li></a>
<a href="#"><li>购物车</li></a>
<a href="#"><li>注册</li></a>
</ul>
</div>
</div>
<div id="menu">
<ul>
<li style="font-size: 25px;" class="ul_li">首页</li>
<li class="ul_li">手机数码</li>
<li class="ul_li">家用电器</li>
<li class="ul_li">育婴保健</li>
<li class="ul_li">鞋靴箱包</li>
<li class="ul_li">奢侈品</li>
</ul>
</div>
<!--轮播-->
<div id="lunbo">
<img src="../../img/1.jpg" width="100%" height="100%"/>
</div>
<!--最新商品-->
<div id="new_product">
<div id="new_product_top">
<font size="5">最新商品</font>
<img src="../../img/title2.jpg" />
</div>
<div id="new_product_buttom">
<div id="new_product_buttom_left">
<img src="../../img/big01.jpg" width="100%" height="100%"/>
</div>
<div id="new_product_buttom_right">
<img src="../../img/middle01.jpg" width="100%" height="100%"/>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
</div>
</div>
<!--广告-->
<div id="gaungao">
<img src="../../img/ad.jpg" width="100%" height="100%"/>
</div>
<!--友情链接和版权信息-->
<div id="linajie" align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright @ 2019-2020 乱七八糟商城 归ginger所有
</p>
</div>
</div>
</body>
</html>
页面效果展示1
页面效果展示2
