这周完成了课程中关于豆瓣首页的制作,初步掌握了制作静态页面的方法
项目实战-豆瓣首页
图标
<title>豆瓣</title><linkrel="shortcut icon"type="image/x-icon"href="./favicon.ico"><linkrel="stylesheet"href="./css/index.css">页头区域
<headerclass="header"><divclass="container clearfix"><divclass="logo left"><h1><ahref="">豆瓣</a></h1></div><divclass="search left"><form><inputtype="text"class="text"placeholder="书籍、电影、音乐、小组、小站、成员"><button><iclass="iconfont icon-sousuo_sousuo"></i></button></form></div><navclass="menu right clearfix"><ahref=""class="menu-read"></a><ahref=""class="menu-movie"></a><ahref=""class="menu-music"></a><ahref=""class="menu-group"></a><ahref=""class="menu-FM"></a><ahref=""class="menu-city"></a><ahref=""class="menu-dongxi"></a><ahref=""class="menu-doupin"></a></nav></div></header>在制作页头区域时,会观察到此区域与其他区域有通用样式,如container,每个区域都是一样的
@import"./reset.css";@import"./common.css";在首页的css中用@规则导入重置css样式和通用css样式
.header .logo a{width:154px;height:0;padding-top:30px;display:block;background:url("./../img/logo.png")no-repeat;overflow:hidden;}设置高度为0,padding-top为高度,那么a元素里的文字就会被挤出来,再溢出隐藏,由于背景图覆盖边框盒,因此就实现了此效果
通用样式
@import"//at.alicdn.com/t/c/font_5080212_3hofr1o5eio.css";body{font-family:Helvetica,Arial,sans-serif;}.left{float:left;}.right{float:right;}.clearfix::after{content:"";display:block;clear:both;}.hidden{display:none;}.btn{background:#41ac52;cursor:pointer;color:#fff;text-align:center;border-radius:4px;}.star-bg{display:inline-block;width:55px;height:11px;background:url("../img/star.png")no-repeat left top/100%;}.star50{background-position:0 0;}.star45{background-position:0 -11px;}.star40{background-position:0 -22px;}在这里面用@规则导入字体图标的css代码,有助于代码更新时进行更改
横幅区域
这个区域采用的是iframe将写好的登录区域导入进来
登录区域css代码
@import"./reset.css";@import"./common.css";a{color:#41ac52;}input[type="text"], input[type="password"]{width:100%;border:1px solid #e4e6e5;box-sizing:border-box;height:34px;padding-left:10px;border-radius:4px;font-size:13px;}input[type="text"].more-text-indent{padding-left:60px;}.container{width:300px;height:300px;line-height:2;padding:30px 10px 10px 10px;color:#9b9b9b;box-sizing:border-box;position:relative;}.container .login .switch-menu{border-bottom:1px solid #ececec;font-size:13px;}.container .login .switch-menu span{width:50%;text-align:center;cursor:pointer;}.container .login .switch-menu span.selected{font-weight:bold;color:#333;border-bottom:1px solid #494949;margin-bottom:-1px;}.container .login .form .form-item{margin:10px 0;position:relative;font-size:13px;}.container .login .form .form-item .txt{font-size:12px;}.container .login .form .form-item .country-code{position:absolute;width:51px;height:26px;left:0;top:5px;text-align:center;color:#333;font-weight:bold;font-size:15px;line-height:26px;border-right:1px solid #e4e6e5;cursor:pointer;}/* 用的是iframe,其视口为iframe对应的窗口 */.container .login .form .form-item .country-code .choose-area{position:fixed;width:100%;height:100%;background:rgba(255,255,255,0.5);left:0;top:0;z-index:1;}.container .login .form .form-item .country-code .choose-area .center{width:285px;height:225px;position:absolute;box-sizing:border-box;border:1px solid #bbb;left:0;right:0;top:0;bottom:0;margin:auto;border-radius:5px;background:#fff;cursor:auto;overflow:hidden;}.container .login .form .form-item .country-code .choose-area .center .title{background:#ebf5eb;height:42px;line-height:42px;text-align:left;padding-left:10px;color:#060;font-weight:bold;}.container .login .form .form-item .country-code .choose-area .center ul{height:180px;overflow:auto;padding:10px;box-sizing:border-box;font-size:14px;}.container .login .form .form-item .country-code .choose-area .center ul li{height:38px;line-height:38px;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;margin-top:-1px;cursor:pointer;}.container .login .form .form-item .country-code .choose-area .center ul li .right{color:#aaa;font-weight:normal;}.container .login .form .form-item .country-code .choose-area .center ul li.selected{color:#42bd56;}.container .login .form .form-item .country-code .choose-area .center ul li.selected .right{color:#42bd56;}.container .login .form .form-item .country-code .choose-area .center ul li.selected .iconfont{margin-left:10px;}.container .login .form .form-item .ab-right{position:absolute;right:7px;top:5px;}.container .login .form .form-item .btn{width:100%;height:34px;font-size:15px;}.container .login .form .form-item.tip{font-size:12px;color:#333;}button:disabled{cursor:not-allowed;background:rgba(66,189,86,0.5);}.container .login .bottom{font-size:11px;border-top:1px solid #ddd;}.container .login .bottom .iconfont{margin-left:12px;}.container .login .bottom .iconfont.icon-weixin{color:#34950e;}.container .login .bottom .iconfont.icon-weibo{color:#ea5d5c;}.container .login .bottom .msg{vertical-align:2px;}.container .qrcode{font-size:13px;}.container .qrcode .title{color:#333;border-bottom:1px solid #494949;}.container .qrcode .code{text-align:center;font-size:0;margin-top:20px;}.container .qrcode .code img{width:170px;height:170px;}.container .qrcode .tip{width:253px;height:26px;line-height:25px;background:rgba(0,0,0,0.08);color:#494949;margin:0 auto;text-align:center;border-radius:20px;margin-top:10px;}.container .change{position:absolute;right:10px;top:10px;cursor:pointer;width:30px;height:30px;}.container .change .icon{display:block;width:30px;height:30px;}.container .change .icon.qricon{background:url("./../img/qricon.png")no-repeat left top/100% 100%;}.container .change .icon.xiazai{background:url("../img/下载.png")no-repeat left top/100% 100%;}.container .change::before{content:"\626B\7801\767B\5F55";background:#f5faf9;border:1px solidrgba(66,189,86,.3);border-radius:3px;color:#666;display:none;font-size:13px;height:20px;padding:3px 5px;position:absolute;right:50px;top:0;width:52px;}.container .change:hover::before{display:block;}主区域
主区域相比较登陆区域有很多公共样式,完成了一个后面的就好完成了
下面的是主区域的通用样式
.container{width:950px;margin:0 auto;}.section{padding:35px 0;}.section.section:nth-child(2n){background:#f7f7f7;}.aside-left{float:left;width:100px;margin-right:20px;}.aside-right{float:right;width:265px;margin-left:30px;}/* 创建BFC */.main{overflow:hidden;}.guang img{width:100%;display:block;}.section-title{margin:12px 0;}.section-title .title{display:inline-block;color:#072;font-size:15px;}.section-title .title::after{content:" · · · · · · ";}.section-title .link{font-size:12px;}.section-title .link::after{content:")";}.section-title .link::before{content:"(";}.aside-left .title{font-size:24px;}.dark-color{color:#494949;}.xiaozucolor{color:#007982!important;}.xiaozucolor:hover{color:#fff!important;}.xiaozucolor:active{color:#fff!important;}.item-list li{display:inline-block;vertical-align:top;line-height:1.5;}.time-list li .img img{width:100%;}.left-menu{font-size:14px;}.block-link{padding:2px 10px;font-size:12px;border-radius:3px;display:inline-block;}.right-menu-list{font-size:12px;}.right-menu-list li{float:left;}热点
豆瓣时间
像下面的绿字部分,就是通用样式,每个小部分都用得到
