项目需求
一、主页面
- logo：css设置位置和浮动
- 菜单栏：无序列表，列表样式为none，隐藏，js鼠标事件，鼠标滑入显示，滑出隐藏
- 登录注册跳转，css设置位置浮动
- banner区：css设置样式
5. 商品展示区：设置整体的位置大小。
- 图片宽度360像素，间隔60像素
- 标题 h3标签，设置颜色，设置外边距
- 正文 p标签，字体大小颜色，间距，两端对齐，设置外边距
- 价格 颜色，位置，编剧，宽高
- 购物车 图片缩小，添加背景颜色，圆角，宽高，浮动，边距
6. 页码区，使用无序列表，列表样式设置为none，第一页上设置圆角，背景颜色，字体颜色
7. 页脚区：上边框显示，使用特殊符号版权©，部分文字上使用span标签设置字体颜色
二、登录注册页面
1、表单和表格的使用
2、登录和注册按钮，设置圆角，背景颜色，小手
3、用户注册和用户登录下边框线的显示
代码：
HTML部分：
主页：
<div class="main">
<!-- logo -->
<div class="div1">
<img src="../image/logo.png" id="" name="">
</div>
<div class="div2">
<!-- 菜单栏 -->
<div class="menu_title" onmouseover="menu1()" onmouseout="menu2()">
<a href="#" >内容分类</a>
</div>
<ul class="content hide" id="content">
<li><a href="#">现实主义</a></li>
<li><a href="#">抽象主义</a></li>
</ul>
</div>
<!-- 登陆注册页面的跳转 -->
<div class="div3">
<a href="denglu.html">登录</a>
<a href="zhuce.html">注册</a>
</div>
<!-- banner区 -->
<div class="banner">
<img src="../image/welcome.png">
</div>
<!-- 商品展示区 -->
<div class="picture0">
<div class="picture1">
<!-- 图片，标题，描述文字，价格，购物车 -->
<div class="pic1" id="pic1">
<img src="../image/wumingnvlang.jpg">
<h3>无名女郎</h3>
<p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文章要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种。</p>
<div>
<div class="price">￥5800</div>
<a href="#">
<div class="shopping_cart">
<img class="img" src="../image/cart.svg" alt="not found">
</div>
</a>
</div>
</div>
<div class="pic1" id="pic1">
<img src="../image/richuyinxing.jpg">
<h3>日出印象</h3>
<p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文章要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种。</p>
<div>
<div class="price">￥5800</div>
<a href="#">
<div class="shopping_cart">
<img class="img" src="../image/cart.svg" alt="not found">
</div>
</a>
</div>
</div>
<div class="pic1 last" id="pic1">
<img src="../image/wudaojiaoshi.jpg">
<h3>舞蹈教室</h3>
<p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文章要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种。</p>
<div>
<div class="price">￥5800</div>
<a href="#" class="a1">
<div class="shopping_cart">
<img class="img" src="../image/cart.svg" alt="not found">
</div>
</a>
</div>
</div>
</div>
<div class="picture2" >
<div class="pic2" id="pic2">
<img src="../image/songshulinzhicheng.jpg">
<h3>松树林之晨</h3>
<p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文章要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种。</p>
<div>
<div class="price">￥5800</div>
<a href="#" class="a1">
<div class="shopping_cart">
<img class="img" src="../image/cart.svg" alt="not found">
</div>
</a>
</div>
</div>
<div class="pic2" id="pic2">
<img src="../image/wen.jpg">
<h3>吻</h3>
<p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文章要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种。</p>
<div>
<div class="price">￥5800</div>
<a href="#" class="a1">
<div class="shopping_cart">
<img class="img" src="../image/cart.svg" alt="not found">
</div>
</a>
</div>
</div>
<div class="pic2 last" id="pic2">
<img src="../image/hongmofangde wuhui.jpg">
<h3>红磨坊的舞会</h3>
<p>图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文章要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种。</p>
<div>
<div class="price">￥5800</div>
<a href="#" class="a1">
<div class="shopping_cart">
<img class="img" src="../image/cart.svg" alt="not found">
</div>
</a>
</div>
</div>
</div>
</div>
<!-- 页码 -->
<div class="page">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><span class="first_page">1</span></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">...</a></li>
<li><a href="#">98</a></li>
<li><a href="#">99</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
<!-- 页脚 -->
<div class="footer">
<p>
<span>M-GALLARY</span>©2017 POWERD BYIMOOC.NC
</p>
</div>
</div>登录页面：
<div id="main" class="main">
<!-- 插入logo -->
<div class="div1">
<img src="../image/logo.png" id="" name="">
</div>
<div class="div2">
<!-- 插入导航 -->
<nav>
<a href="#">内容分类</a>
<ul class="hide">
<li>现实主义</li>
<li>抽象主义</li>
</ul>
</nav>
</div>
<!-- 实现登陆注册页面和主页面的跳转 -->
<div class="div3">
<a href="denglu.html">登录</a>
<a href="zhuce.html">注册</a>
<a href="index.html">回到首页</a>
</div>
<!-- 插入左侧的banner图 -->
<div class="div4">
<img src="../image/login_banner.png">
</div>
<div class="div5" id="div5">
<div class="div6">用户登录</div>
<form>
<!-- 五行两列的表格写用户注册内容 -->
<table>
<tr>
<td><label>用户名 </label></td>
<td><input type="text" required autofocus="true"></td>
</tr>
<tr>
<td><label>密码 </label></td>
<td><input type="password" required></td>
</tr>
<tr>
<td colspan="2" align="center"><span class="btn">登录</span></td>
</tr>
</table>
</form>
</div>
</div>注册页面：
<div id="main" class="main">
<!-- 插入logo -->
<div class="div1">
<img src="../image/logo.png">
</div>
<!-- 插入导航 -->
<div class="div2">
<nav>
<a href="#">内容分类</a>
<ul>
<li>现实主义</li>
<li>抽象主义</li>
</ul>
</nav>
</div>
<!-- 实现登陆注册页面和主页面的跳转 -->
<div class="div3">
<a href="denglu.html">登录</a>
<a href="zhuce.html">注册</a>
<a href="index.html">回到首页</a>
</div>
<!-- 插入左侧的banner图 -->
<div class="div4">
<img src="../image/login_banner.png">
</div>
<div class="div5" id="div5">
<div class="div6">用户注册</div>
<form>
<!-- 五行两列的表格写用户注册内容 -->
<table>
<tr>
<td><label>用户名 </label></td>
<td><input type="text" autocomplete="off" id="username"></td>
</tr>
<tr>
<td><label>密码 </label></td>
<td><input type="password" id="password1"></td>
</tr>
<tr>
<td><label>确认密码 </label></td>
<td><input type="password" id="password2"></td>
</tr>
<tr>
<td><label>上传头像 </label></td>
<td><input type="file"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="注册" class="btn"></td>
</tr>
</table>
</form>
</div>
</div>css部分：
登陆页面：
*{
padding: 0;
margin: 0 auto;
}
/*设置这个页面的背景颜色，字体和字体大小*/
body{
background-color: rgba(245,245,245,0.8);
font-size: 16px;
font-family: 微软雅黑;
}
.main{
width: 1200px;
height: 600px;
top:0;
position: relative;
}
/*设置logo的位置大小*/
.div1{
width: 300px;
height: 50px;
float:left;
margin-top:10px;
}
/*设置导航栏*/
.div2{
width: 600px;
height:50px;
float:left;
line-height: 50px;
margin-top:10px;
}
.hide{
display: none;
}
/*实现跳转页面的位置设置*/
.div3{
width: 200px;
height:50px;
float:right;
line-height: 50px;
margin-top:10px;
}
/*左侧图片的设置*/
.div4{
width:600px;
height: 536px;
float:left;
margin:10px auto 30px;
}
/*右侧注册页面的设置*/
.div5{
width:600px;
height:536px;
background:white;
float:left;
}
/*用户注册四个字的颜色大小位置*/
.div6{
margin:130px 150px 10px;
width:250px;
color:red;
font-size:35px;
padding-bottom:20px;
border-bottom:3px solid rgba(245,245,245,0.7);
}
/*表单设置*/
form{
margin:20px 200px 20px 150px;
line-height: 40px;
}
/*注册按钮的大小,背景颜色,圆角设置*/
.btn{
padding:5px 10px;
background-color:red;
color:white;
border-radius:3px;
font-size:15px;
cursor:pointer;
}
主页面：
*{
padding: 0;
margin: 0 auto;
}
/*设置整个文本的背景颜色，字体和字体大小*/
body{
background: #f5f5f5;
font-size: 16px;
font-family: 微软雅黑;
}
.main{
width:1200px;
top:0px;
position: relative;
}
/*设置logo位置，浮动*/
.div1{
width: 300px;
height: 50px;
float:left;
margin-top:10px;
}
/*设置菜单栏*/
.div2{
width: 600px;
height:50px;
float:left;
/*line-height: 30px;*/
margin-top:20px;
}
/*隐藏菜单栏的无序列表*/
.hide{
display:none;
}
.menu_title{
margin-bottom: 10px;
}
/*无序列表设置样式*/
.div2 ul{
margin-top:0px;
position: relative;
line-height:20px;
list-style:none;
float:left;
width:75px;
}
/*设置背景颜色*/
.div2 ul li{
background-color: rgba(255,255,255,0.5);
}
/*设置登陆注册的位置和浮动*/
.div3{
width: 100px;
height:50px;
float:right;
line-height: 40px;
margin-top:10px;
}
/*设置banner区图片位置*/
.banner{
width:1200px;
float:left;
margin:10px auto 10px;
}
/*设置a标签，不要下划线，颜色为黑色*/
a{
text-decoration: none;
color:#000;
}
/*设置a标签访问过不要下划线，颜色为紫色*/
a:visited{
text-decoration: none;
color:purple;
}
/*设置商品展示区的整体大小位置*/
.picture0{
width:1200px;
margin:10px auto;
}
/*设置底纹，阴影样式*/
.pic1,.pic2{
width:360px;
height:420px;
background-color: white;
float:left;
margin:10px 60px 60px 0;
box-shadow: 0 0 5px 3px #ccc
}
/*设置图片下面的文字样式*/
.picture1 h3,.picture2 h3{
color:red;
margin:10px 20px;
}
/*设置图片下的描述文字样式，两端对齐*/
.picture1 p ,.picture2 p{
font-size: 12px;
text-align: justify;
color:black;
letter-spacing: 2px;
margin:10px 20px;
}
/*设置每一个图片以及描述文字的位置，左右间隔60px*/
.picture1 .pic1{
width:360px;
margin-right:60px;
margin-left: 0px;
float:left;
}
/*设置每行最后一组图片样式*/
.picture1 .last{
margin-right:0px;
float:left;
}
/*设置每一个图片以及描述文字的位置，左右间隔60px*/
.picture2 .pic2{
width:360px;
margin-right:60px;
margin-left: 0px;
float:left;
}
/*设置每行最后一组图片样式*/
.picture2 .last{
margin-right:0px;
float:left;
}
/*设置价格的颜色，位置，大小*/
.price{
color:red;
float:left;
width: 180px;
height:50px;
margin:10px 20px;
}
/*购物车图片大小设置*/
.img{
width:25px;
height:30px;
}
/*购物车背景颜色，圆角浮动设置*/
.shopping_cart{
width: 50px;
height:30px;
float:right;
background-color: red;
text-align: center;
line-height: 30px;
border-radius: 10%;
margin:10px 20px 10px 5px;
}
/*页码区*/
/*页码大小，行高，位置*/
.page{
width:1200px;
margin:20px auto 10px auto;
height: 60px;
line-height:60px;
}
.page ul{
margin:auto;
width:600px;
}
/*无序列表设置*/
.page ul li{
float:left;
margin-right: 20px;
list-style:none;
}
/*第一页设置圆角，背景颜色和字体颜色*/
.first_page{
border-radius:50%;
padding:5px 10px;
background-color: #c5c5c5;
color:black;
}
/*页脚区*/
/*设置位置，浮动，上边框线*/
.footer{
width: 1200px;
margin:10px auto;
border-top: 1px solid gray;
float:left;
}
/*设置页脚文字大小，间距以及居中*/
.footer p{
text-align: center;
height:50px;
line-height: 50px;
letter-spacing: 2px;
font-size:14px;
}
/*设置文字为粉红色*/
span{
color:#FF69B4;
}
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
