天猫网站建设分析企业网站建站流程

天猫网站建设分析,企业网站建站流程,电子商务网站建设是学什么软件,创意设计包装这周完成了课程中关于豆瓣首页的制作,初步掌握了制作静态页面的方法 项目实战-豆瓣首页 图标 title豆瓣/titlelink relshortcut icon typeimage/x-icon href./favicon.icolink relstylesheet h…这周完成了课程中关于豆瓣首页的制作,初步掌握了制作静态页面的方法项目实战-豆瓣首页图标title豆瓣/titlelinkrelshortcut icontypeimage/x-iconhref./favicon.icolinkrelstylesheethref./css/index.css页头区域headerclassheaderdivclasscontainer clearfixdivclasslogo lefth1ahref豆瓣/a/h1/divdivclasssearch leftforminputtypetextclasstextplaceholder书籍、电影、音乐、小组、小站、成员buttoniclassiconfont icon-sousuo_sousuo/i/button/form/divnavclassmenu right clearfixahrefclassmenu-read/aahrefclassmenu-movie/aahrefclassmenu-music/aahrefclassmenu-group/aahrefclassmenu-FM/aahrefclassmenu-city/aahrefclassmenu-dongxi/aahrefclassmenu-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[typetext], input[typepassword]{width:100%;border:1px solid #e4e6e5;box-sizing:border-box;height:34px;padding-left:10px;border-radius:4px;font-size:13px;}input[typetext].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;}热点豆瓣时间像下面的绿字部分,就是通用样式,每个小部分都用得到电影小组读书页脚