老师
html
<!DOCTYPE html><html lang="en"><!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> <meta name="KeyWords" content="现代家具，玉石家具，办公家具，组合家具"> <meta name="Description" content="慕家居有十多年家居行业经验，为您提供全方位家居好货"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/css.css"></head>
<body> <!-- 顶部区 --> <div class="top"> <div class="center-wrap clearfix"> <p>服务热线:400-8888-888</p> </div> </div> <!-- 导航区 --> <header class="navigation clearfix"> <div class="center-wrap"> <!-- logo --> <div class="logo"> <p>慕家居</p> </div> <!-- 导航 --> <div class="nav-box"> <ul> <li class="wzsy identical"> <a href=""> <div class="picbox"> <img src="images/home-gry.png" alt=""> <img src="images/home-white.png" alt=""> </div> <div class="wordbox"> <p>网站首页</p> </div> </a> </li> <li class="gywm identical"> <a href=""> <div class="picbox"> <img src="images/abouts-gry.png" alt=""> <img src="images/abouts-white.png" alt=""> </div> <div class="wordbox"> <p>关于我们</p> </div> </a> </li> <li class="fwjs identical"> <a href=""> <div class="picbox"> <img src="images/kefu-gry.png" alt=""> <img src="images/kefu-white.png" alt=""> </div> <div class="wordbox"> <p>服务建设</p> </div> </a> </li> <li class="cpzx identical"> <a href=""> <div class="picbox"> <img src="images/chanpin-gry.png" alt=""> <img src="images/chanpin-white.png" alt=""> </div> <div class="wordbox"> <p>产品中心</p> </div> </a> </li> <li class="fwdt identical"> <a href=""> <div class="picbox"> <img src="images/fuwu-gry.png" alt=""> <img src="images/fuwu-white.png" alt=""> </div> <div class="wordbox"> <p>服务大厅</p> </div> </a> </li> </ul> </div> <!-- 搜索框 --> <div class="search-box"> <input type="text" placeholder="请输入搜索内容"> <a href="javascript:;" class="iconfont"></a> </div> </div> </header>
<!-- banner区 --> <div class="banner"> <img src="images/banner01.png" alt=""> <div class="buttom"> <a href="" class="btn one"></a> <a href="" class="btn two"></a> <a href="" class="btn three"></a> </div> </div>
<!-- 商品区 --> <section class="spq"> <div class="center-wrap"> <div class="leftbtn"> <img src="images/prev.png" alt=""> <img src="images/prev_active.png" alt=""> </div> <nav> <ul class="clearfix"> <li> <a href=""> <div class="picbox nihao"> <img src="images/product01.png" alt="">
</div> <div class="wordbox"> <p>时尚卫生间墙面颜色</p> <p>2029装饰设计</p> </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="images/product02.png" alt=""> </div> <div class="wordbox"> <p>现代北欧风格厨房装</p> <p> 2029饰效果图</p> </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="images/product03.png" alt=""> </div> <div class="wordbox"> <p>现代时尚北欧风格卧</p> <p>2029室装饰画</p> </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="images/product04.png" alt=""> </div> <div class="wordbox"> <p>130平简约现代北欧</p> <p>2029风格装修</p> </div> </a> </li> <li> <a href=""> <div class="picbox"> <img src="images/product05.png" alt=""> </div> <div class="wordbox"> <p>现代北欧风格小客厅</p> <p>2029装修设计</p> </div> </a> </li> </ul> </nav> <div class="rightbtn"> <img src="images/next.png" alt=""> <img src="images/next_active.png" alt=""> </div> </div> </section>
<!-- 了解我们区 --> <section class="ljwm clearfix"> <div class="center-wrap"> <div class="on"> <h2>了解我们</h2> <b class="leftline"></b> <p>about us</p> </div> <div class="bigbox"> <div class="lefttext"> <p class="gywm">关于我们</p> <p class="zscl">慕家居装饰材料有限公司</p> <p class="jjzx">慕家居家居装修网北欧风格家具图片专区,是国内海量全面的 高质量北欧风格家具图片库…</p> <form action=""> <a href=""> <input type="button" value="了解更多"> </a> </form> </div> <div class="middleimg"> <img src="images/aboutus.png" alt=""> </div> <div class="rightchoice clearfix"> <div class="zxly gongtong"> <div class="picbox"> <img src="images/liuyan.png" alt=""> </div> <div class="wordbox"> <p class="chinese">在线留言</p> <p class="english">on-line message</p> </div> </div> <div class="ggjy gongtong"> <div class="picbox"> <img src="images/guanggao.png" alt=""> </div> <div class="wordbox"> <p class="chinese">广告经营</p> <p class="english">Advertising management</p> </div> </div> <div class="wlzx gongtong"> <div class="picbox"> <img src="images/wangluo.png" alt=""> </div> <div class="wordbox"> <p class="chinese">网络咨询</p> <p class="english">Network consultation</p> </div> </div> </div> </div>
</section>
<!-- 精品推荐区 --> <section class="jptj"> <div class="center-wrap"> <div class="xwzx"> <h2>新闻中心</h2> <p>press center</p> </div> </div> </section></body>
</html>
css
/* 顶部区 */
.top {
height: 40px;
min-width: 1155px;
background-color: #0058AA;
}
.top p {
float: right;
font-size: 18px;
color: #FFFFFF;
line-height: 40px;
}
/* 导航区 */
.navigation {
padding: 20px 0 10px;
}
.navigation .logo {
float: left;
width: 192px;
height: 91px;
margin-right: 80px;
}
.navigation .logo p {
font-size: 64px;
color: #0058AA;
line-height: 91px;
}
.navigation .nav-box {
float: left;
width: 560px;
height: 91px;
position: relative;
top: -10px;
}
.navigation .nav-box ul li {
float: left;
margin-right: 60px;
}
.navigation .nav-box ul li:last-child {
margin-right: 0;
}
.navigation .nav-box ul li.wzsy,
.navigation .nav-box ul li.gywm,
.navigation .nav-box ul li.fwjs,
.navigation .nav-box ul li.cpzx,
.navigation .nav-box ul li.fwdt {
width: 64px;
height: 91px;
}
.navigation .nav-box ul li.identical .picbox {
width: 64px;
border-radius: 50%;
/* 内容垂直居中 */
padding: 14px 0;
margin-bottom: 20px;
position: relative;
top: 14px;
left: -2px;
transition: transform .3s linear 0s;
}
.navigation .nav-box ul li.identical .picbox img {
display: block;
/* 水平居中 */
margin: 0 auto;
}
/* 默认白色图片隐藏 */
.navigation .nav-box ul li.identical .picbox img:last-child {
display: none;
}
.navigation .nav-box ul li.identical .picbox:hover {
transform: scale(1.1);
/* 直接设置盒子背景为蓝色 */
background-color: #0058AA;
}
/* 鼠标移入时 灰色图片隐藏 */
.navigation .nav-box ul li.identical .picbox:hover img:first-child {
display: none;
}
/* 鼠标移入时 白色图片显示 */
.navigation .nav-box ul li.identical .picbox:hover img:last-child {
display: block;
}
.navigation .nav-box ul li.identical .wordbox {
width: 64px;
height: 21px;
font-size: 16px;
color: #545454;
}
.navigation .search-box {
float: right;
width: 277px;
height: 39px;
position: relative;
top: 25px;
}
.navigation .search-box input {
float: left;
width: 215px;
height: 33px;
padding-left: 20px;
font-size: 14px;
color: #545454;
}
.navigation .search-box a {
float: left;
display: block;
width: 38px;
height: 37px;
background-color: #0058AA;
color: #FFFFFF;
line-height: 37px;
text-align: center;
font-size: 28px;
}
/* banner区 */
.banner {
position: relative;
}
.banner img {
width: 100%;
min-width: 1155px;
}
.banner .buttom {
position: absolute;
top: 590px;
left: 932px;
width: 80px;
height: 20px;
}
.banner .buttom a.btn {
float: left;
width: 15px;
height: 15px;
background-color: #0058AA;
margin-right: 10px;
border-radius: 50%;
}
.banner .buttom a.two,
.banner .buttom a.three {
background-color: #FFFFFF;
}
.banner .buttom a.btn:last-child {
margin-right: 0;
}
/* 商品区 */
.spq .center-wrap {
position: relative;
}
.spq .leftbtn {
position: absolute;
top: 132px;
left: -15px;
width: 48px;
height: 48px;
}
.spq .rightbtn {
position: absolute;
top: 132px;
right: -15px;
width: 48px;
height: 48px;
}
/* 默认隐藏蓝色箭头 */
.spq .leftbtn img:last-child,
.spq .rightbtn img:last-child {
display: none;
}
/* 鼠标移入隐藏灰色箭头 */
.spq .leftbtn:hover img,
.spq .rightbtn:hover img {
display: none;
}
/* 鼠标移入显示蓝色箭头 */
.spq .leftbtn:hover img:last-child,
.spq .rightbtn:hover img:last-child {
display: block;
}
.spq {
padding-top: 39px;
}
.spq nav {
/* 水平居中 */
margin: 0 auto;
width: 1055px;
margin-bottom: 32px;
}
.spq nav ul li {
float: left;
width: 171px;
height: 234px;
margin-right: 50px;
}
.spq nav ul li:last-child {
margin-right: 0;
}
.spq nav ul li .picbox {
margin-bottom: 10px;
}
.spq nav ul li .wordbox {
font-size: 18px;
color: #838383;
}
/* 了解我们区 */
.ljwm .on h2 {
font-size: 32px;
color: #696868;
text-align: center;
margin-bottom: 5px;
}
.ljwm .on p {
font-size: 18px;
color: #9B9B9B;
text-align: center;
margin-bottom: 50px;
}
.ljwm .bigbox {
width: 1155px;
height: 256px;
}
.ljwm .bigbox .lefttext {
float: left;
width: 238px;
height: 242px;
margin-right: 147px;
}
.ljwm .bigbox .middleimg {
float: left;
width: 384px;
height: 256px;
margin-right: 113px;
margin-bottom: 82px;
}
.ljwm .bigbox .rightchoice {
float: left;
width: 273px;
height: 203px;
}
.bigbox .lefttext .gywm {
font-size: 26px;
color: #0058AA;
}
.bigbox .lefttext .zscl {
font-size: 21px;
color: #5A5A5A;
line-height: 41px;
border-bottom: 4px solid #0058AA;
margin-bottom: 24px;
}
.bigbox .lefttext .jjzx {
font-size: 18px;
color: #7B7C7C;
line-height: 26px;
margin-bottom: 27px;
}
.bigbox .lefttext form imput {
display: block;
background-color: #0058AA;
width: 130px;
height: 38px;
}
.bigbox .lefttext .gongtong {
font-size: 16px;
color: #7B7C7C;
line-height: 26px;
margin-bottom: 27px;
}
.bigbox .rightchoice .gongtong {
width: 273px;
height: 61px;
background-color: #CCCCCC;
margin-bottom: 10px;
}
.bigbox .rightchoice .gongtong .picbox {
float: left;
position: relative;
left: 30px;
top: 15px;
}
.bigbox .rightchoice .gongtong .wordbox {
float: left;
text-align: center;
position: relative;
left: 48px;
top: 8px;
}
.bigbox .rightchoice .gongtong .wordbox .chinese {
font-size: 22px;
color: #FFFFFF;
text-align: right;
}
.bigbox .rightchoice .gongtong .wordbox .english {
font-size: 12px;
color: #FFFFFF;
}
.bigbox .rightchoice .ggjy {
width: 273px;
height: 61px;
margin-bottom: 10px;
background-color: #CCCCCC;
}
.bigbox .rightchoice .ggjy .wordbox .chinese {
position: relative;
left: -44px;
}
.bigbox .rightchoice .wlzx {
width: 273px;
height: 61px;
background-color: #CCCCCC;
}
.bigbox .rightchoice .wlzx .wordbox .chinese {
position: relative;
left: -23px;
}
.bigbox .rightchoice .gongtong:hover {
background-color: #0058AA;
}
/* 精品推荐区 */
.jptj {
height: 508px;
padding-top: 82px;
background-color: #EFF0F4;
}
.jptj .xwzx h2 {
font-size: 32px;
color: #696868;
text-align: right;
text-align: center;
}
.jptj .xwzx p {
font-size: 18px;
color: #9B9B9B;
text-align: right;
text-align: center;
margin-bottom: 16px;
}
base.css
/* 类型公共类 */
body {
font-family: Helvetica;
}
@font-face {
font-family: 'iconfont';
src: url('../font/iconfont.woff2') format('woff2'), url('../font/iconfont.woff') format('woff'), url('../font/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 盒子居中 */
.center-wrap {
/* 页面版心宽度 */
width: 1155px;
margin: 0 auto;
}
/* 清除浮动 */
.clearfix {
overflow: hidden;
}
.clearfix::after {
content: '';
display: block;
clear: both;
overflow: hidden;
}
/* 文字居中 */
.tac {
text-align: center;
}
/* 转块 */
.db {
display: block;
}
/* 转行内块 */
.dib {
display: inline-block;
}
reset.css
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html {
color: #000;
background: #FFF
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6 pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
fieldset,
img {
border: 0
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal
}
ol,
ul {
list-style: none
}
caption,
th {
text-align: left
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal
}
q:before,
q:after {
content: ''
}
abbr,
acronym {
border: 0;
font-variant: normal
}
sup {
vertical-align: text-top
}
sub {
vertical-align: text-bottom
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
*font-size: 100%
}
legend {
color: #000
}
#yui3-css-stamp.cssreset {
display: none
}
a {
text-decoration: none;
}
页面的问题
1、那些横线我不会做 不知道怎么去实现
2、了解更多那个按钮 要怎么去 让它变色 跟尺寸的变化
3、右边的在线经营广告经营部分的过渡 我不会做 我不知道用什么属性来过渡
4、目前我只能看出这么多问题 请老师再帮我检查检查
麻烦老师帮我看看我的问题谢谢老师
搜索
复制
正在回答 回答被采纳积分+1
同学你好，解答如下：
1、横线指的是这两边的吗？
建议调整html结构，横线与内容结构分开
横线以及内容用定位，参考：
2、正常给input设置样式即可
3、可以用背景色去过渡，参考：
4、写完做后提交即可，批复作业的老师会给出详细的修改文档以及建议。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星