《css基础知识》——案例：淘宝首页的登录界面

在熟悉内边框、外边框、边框等概念之后，还需掌握父子盒子的知识内容。在弹性盒子中，定父盒子的宽高，子盒子等分父盒子宽度，高度需指定。或者定父盒子的宽高，子盒子设置宽高，控制间距。下面就是这两种方式的例子。
1、子盒子等分宽度，指定高度
html：

<div class="flexbox"><div class="flexson"></div><div class="flexson"></div><div class="flexson"></div><div class="flexson"></div><div class="flexson"></div><div class="flexson"></div><div class="flexson"></div><div class="flexson"></div>
</div>

对应的css：

.flexbox{margin:0 auto;width:602px;height:401px;display:flex;flex-wrap:wrap;border:red solid;border-width:1px 0 0 1px;
}.flexson{width:150px;height:200px;background-color:#ddd;border:red solid;border-width:0 1px 1px 0;

显示如图：
2、子盒子设置宽高，控制间距
html：

<div class="flexbox2"><div class="flexson2"></div><div class="flexson2"></div><div class="flexson2"></div><div class="flexson2"></div><div class="flexson2"></div><div class="flexson2"></div><div class="flexson2"></div><div class="flexson2"></div>
</div>

CSS:

.flexbox2{margin:200px auto;width:601px;height:401px;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:space-between;border:red solid;border-width:1px 0 0 1px;
}.flexson2{width:130px;height:180px;background-color:#ddd;border:red solid;border-width:0 1px 1px 0;
}

显示如图：

当然这都是基于一定的< html >< head >< body>框架下实现的

在掌握了CSS的一定基础知识后，就可以开始做一些页面的实战。
taobao.html

<html><head><title>第一个前端工程</title><link rel="stylesheet" type="text/css" href="css/com.css"><link rel="stylesheet" type="text/css" href="css/taobao.css"></head><body><header class="header"></header><nav class="nav"><div class="nav-left"></div><section class="nav-right"><div class="nr-user"><div class="nr-user-icon"></div><div class="nr-user-unlogin">Hi&nbsp;您好</div><div class="nr-user-two"><div><span class="coin-icon"></span>领淘金币抵钱</div><div><span class="club-icon"></span>会员俱乐部</div></div><div class="nr-user-btns"><div>登录</div><div>注册</div><div>开店</div></div></div><dl class="nr-news"><dt class="s">公告</dt><dd class="s">阿里、腾讯等六家公司联合公益《淘宝汽配行业管理》</dd><dt>规则</dt><dd>2阿里、腾讯等六家公司联合公益《淘宝汽配行业管理》</dd><dt>论坛</dt><dd>3阿里、腾讯等六家公司联合公益《淘宝汽配行业管理》</dd><dt>安全</dt><dd>4阿里、腾讯等六家公司联合公益《淘宝汽配行业管理》</dd><dt>公益</dt><dd>5阿里、腾讯等六家公司联合公益《淘宝汽配行业管理》</dd></dl><div class="nr-user-sec"><div><div><div class="nus-charge"></div><span>充话费</span></div><div><div class="nus-travel"></div><span>旅行</span></div><div><div class="nus-insure"></div><span>车险</span></div><div><div class="nus-game"></div><span>游戏</span></div></div><div><div><div class="nus-lottery"></div><span>彩票</span></div><div><div class="nus-movie"></div><span>电影</span></div><div><div class="nus-hotle"></div><span>酒店</span></div><div><div class="nus-money"></div><span>理财</span></div></div></div></section></body><script></script>
</html>

taobao.css

body{background-color:#dedede;
}.header{width:100%;height:36px;background-color:skyblue;
}.nav{margin:0 auto;width:1170px;height:522px;display:flex;
}.nav-left{width:900px;height:522px;
}.nav-right{flex-grow:1;height:522px;background-color:white;
}.nr-user{padding:10px 0;height:130px;background-color:#eee;background:#fff url(../resource/imgs/tb-nv-user-bg.jpg) center no-repeat;background-size:cover;
}.nr-user-icon{margin:0 auto;width:50px;height:50px;border-radius:25px;background:url(../resource/imgs/head.jpg) center no-repeat;
}.nr-user-unlogin{margin:2px 0;height:17px;line-height:17px;text-align:center;font-size:12px;color:#3c3c3c;
}.nr-user-two{padding:0 30px;height:17px;display:flex;justify-content:space-between;
}.nr-user-two>div{width:102px;height:100%;background-color:#ffe4db;border-radius:8.5px;color:#ff5000;display:flex;align-items:center;
}.nr-user-two>div>span{display:inline-block;width:16px;height:16px;line-height:16px;margin-right:6px;border-radius:8px;background:url(../resource/imgs/small-icons.png) no-repeat;background-size:24px 597px;
}.nr-user-two>div>.coin-icon{background-position:0 -572px;}
.nr-user-two>div>.club-icon{background-position:0 -528px;}.nr-user-btns{height:40px;padding:0 10px;display:flex;justify-content:space-between;align-items:center;
}.nr-user-btns>div{width:78px;text-align:center;height:23px;line-height:25px;border-radius:5px;background:linear-gradient(to right,#ff2200,#ff6f06);color:#fefefe;font-size:14px;font-weight:bold;cursor:pointer;    user-select:none;.nr-news{border-top:#efefef 1px solid;border-bottom:#efefef 1px solid;margin-top:8px;position:relative;padding-top:8px;height:70px;display:flex;justify-content:space-around;
}.nr-news>dt{font-weight:bold;cursor:pointer;user-select:none;height:22px;border-bottom:transparent 2px solid;
}.nr-news>dt.s,.nr-news>dt:hover{border-bottom-color:#f40;color:#40;
}.nr-news>dd{position:absolute;top:30px;display:none;height:25px;line-height:25px;margin:6px 8px;overflow:hidden;background-color:white;
}.nr-news>dd.s{display:block;
}
.nr-user-sec>div{height:77px;display:flex;border-left:#efefef 1px solid
}.nr-user-sec>div>div{height:100%;flex-grow:1;border:#efefef solid;border-width:0 1px 1px 0;padding:15px 0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
}.nr-user-sec>div>div>div{width:24px;height:24px;background:url(../resource/imgs/small-icons.png) no-repeat;background-size:24px 597px;
}.nr-user-sec>div>div>span{display:block;width:67.5px;text-align:center;
}.nr-user-sec>div>div>.nus-charge{background-position:0 0;}
.nr-user-sec>div>div>.nus-travel{background-position:0 -88px;}
.nr-user-sec>div>div>.nus-insure{background-position:0 -44px;}
.nr-user-sec>div>div>.nus-game{background-position:0 -132px;}
.nr-user-sec>div>div>.nus-lottery{background-position:0 -176px;}
.nr-user-sec>div>div>.nus-movie{background-position:0 -220px;}
.nr-user-sec>div>div>.nus-hotle{background-position:0 -264px;}
.nr-user-sec>div>div>.nus-money{background-position:0 -308px;}

其中：
①先把要做的这部分的页面在整个页面中，定好相应的位置。也就是整个页面的布局尺寸要定下来，才能在样本相对应的位置处做进一步细分。实例中：确定nav-right的位置。
②大多的部分的布局思路：父盒子定下来之后，再分为两个子盒子。一个子盒子为图片，另一个子盒子为文字内容。图片需注意原图的大小与样图的大小之间的比例；图片的保存格式。文字内容需注意样式；字体；颜色两者都需注意内外边框的调整。实例中：可参考nr-user-two部分。
③在实例中nr-news部分是比较复杂的。运用相对定位与绝对定位定下了dl、dt的位置。用共性方法+hover的方法解决了，dt部分持续的橙色下划线问题。用溢出隐藏overflow，解决了dd的新闻内容部分的溢出屏幕部分的内容隐藏。
④为实现4×2的布局效果，也可以分成两行，也就是一行四个的方式来完成。实例中：可参考nr-user-sec.也可通过一个大的父盒子，其中8个子盒子的方式来完成，如下图所示：

<div class="nr-flexbox"><div><div class="nus-charge"></div><span>充话费</span></div><div><div class="nus-travel"></div><span>旅行</span></div><div><div class="nus-insure"></div><span>车险</span></div><div><div class="nus-game"></div><span>游戏</span></div><div><div class="nus-lottery"></div><span>彩票</span></div><div><div class="nus-movie"></div><span>电影</span></div><div><div class="nus-hotle"></div><span>酒店</span></div><div><div class="nus-money"></div><span>理财</span></div>
</div>

.nr-flexbox{margin:0 auto;width:281px;height:152px;display:flex;flex-wrap:wrap;border:#ddd solid;border-width:1px 0 0 1px;
}.nr-flexbox>div{width:70px;height:76px;background-color:white;border:#ddd solid;border-width:0 1px 1px 0;
}.nr-flexbox>div>div{width:24px;height:24px;line-height:24px;margin:19px 15.5px 10px 22.5px;background:url(../resource/imgs/small-icons.png) no-repeat;background-size:24px 597px;
}.nr-flexbox>div>span{display:block;width:67.5px;text-align:center;
}.nr-flexbox>div>.nus-charge{background-position:0 0;}
.nr-flexbox>div>.nus-travel{background-position:0 -88px;}
.nr-flexbox>div>.nus-insure{background-position:0 -44px;}
.nr-flexbox>div>.nus-game{background-position:0 -132px;}
.nr-flexbox>div>.nus-lottery{background-position:0 -176px;}
.nr-flexbox>div>.nus-movie{background-position:0 -220px;}
.nr-flexbox>div>.nus-hotle{background-position:0 -264px;}
.nr-flexbox>div>.nus-money{background-position:0 -308px;}

整个实例显示效果如下：

《css基础知识》——案例：淘宝首页的登录界面相关推荐

css+html5仿写淘宝首页
问题定义为了锻炼自己原生的能力,我决定仿写一下淘宝的首页.一下记录,仿写的全部步骤.按照软件工程的方法来实现.(ps,纯为学习,没有什么不良居心~~) 可行性研究技术采用原生js+html5+cs ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
PS案例实战，从基础到精通淘宝美工/海报制作/人物精修-姜浩-专题视频课程
PS案例实战,从基础到精通淘宝美工/海报制作/人物精修-379人已学习课程介绍性价比高的ps课程 78节实例课程 35个PS案例平均每节只需3毛钱课程收益 PS基础, ...
HTML+CSS简单的淘宝首页框架布局小练(一）
开的前端的课程,练习淘宝的前台页面的框架,就简单根据理解写了下,(小傻猫)记录学习的经历简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的首先需要注意的是该部分的布局,是将该部分分成量大块布局 ...
HTML5期末大作业：淘宝网站设计——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:淘宝网站设计--仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作 ...
淘宝首页html css
自己做了一个淘宝首页的HTML+CSS 新手有不足,请指教在这里插入代码片 ```<!DOCTYPE html> <html> <head><meta ch ...
网页开发——淘宝首页导航
这篇博文主要是重新学习(复习)前端知识,通过写淘宝购物首页导航为案例. html主要书写内容: 1.首先我写了一个大盒子,用于存放所用的全部标签 <div class="nav&quo ...
还原淘宝首页最顶部的导航栏（含下拉菜单，图标等）
还原了淘宝首页最顶部的导航栏,包括了各个导航的下拉列表等(位置对齐稍微有些偏差,毕竟没有原版设计图),用到了jquery,js,CSS3等知识.没有花时间去做录屏GIF,就几张效果图看下:如下原始导 ...
页面布局（1）：淘宝首页
大家好,我是梅巴哥er. 入职前端后,我相信有很多小伙伴都是从写简单页面或者简单的功能开始入手的.比如活动页面,活动详情页,活动某项交互等. 为了快速适应开发需求,在较短时间内完成手头工作,以便挤出更 ...

《css基础知识》——案例：淘宝首页的登录界面

《css基础知识》——案例：淘宝首页的登录界面相关推荐

最新文章

热门文章