网页临摹12.04
来源:互联网 发布:高校教师资格证网络 编辑:程序博客网 时间:2024/04/27 14:46
html代码
<div class="root"> <div class="warp"> <div class="header"> <div class="header-content"> <a href="https://youpin.mi.com/app/shop/login?followup=https%3A%2F%2Fyoupin.mi.com%2F">登录</a> <a href="https://account.xiaomi.com/pass/register?followup=https%3A%2F%2Fyoupin.mi.com%2F">注册</a> <p id="header-line"></p> <span class="moblie-icon"></span> <a href="">下载APP</a> </div> </div> </div> <div class="container"> <div class="logo"> </div> <div class="search-form"> <a class="search-icon"></a> <div class="search-text"> <input type="text" value placeholder="冬日里不能错过的美食"> </div> </div> <div class="list"> <ul class="nav-list "> <li data-src="/goodsbycategory?firstId=446&secondId=446&title=%E6%9C%89%E5%93%81%E6%8E%A8%E8%8D%90" data-index="0" class="first" style="width: 63px;"> <span class="item">有品推荐</span> </li> <li data-src="/goodsbycategory?firstId=115&secondId=115&title=%E5%AE%B6%E7%94%B5" data-index="1" class="" style="width: 63px;"> <span class="item">家电</span> </li> <li data-src="/goodsbycategory?firstId=140&secondId=140&title=%E9%A4%90%E5%8E%A8" data-index="3" class="" style="width: 63px;"> <span class="item">影音</span> </li> <li data-src="/goodsbycategory?firstId=140&secondId=140&title=%E9%A4%90%E5%8E%A8" data-index="3" class="" style="width: 63px;"> <span class="item">餐厨</span> </li> <li data-src="/goodsbycategory?firstId=93&secondId=93&title=%E6%9C%8D%E9%A5%B0" data-index="4" class="" style="width: 63px;"> <span class="item">服饰</span> </li> <li data-src="/goodsbycategory?firstId=116&secondId=116&title=%E6%99%BA%E8%83%BD" data-index="5" class="" style="width: 63px;"> <span class="item">智能</span> </li> <li data-src="/goodsbycategory?firstId=389&secondId=389&title=%E5%81%A5%E5%BA%B7" data-index="6" class="" style="width: 63px;"> <span class="item">健康</span> </li> <li data-src="/goodsbycategory?firstId=341&secondId=341&title=%E6%B4%97%E6%8A%A4" data-index="7" class="" style="width: 63px;"> <span class="item">洗护</span> </li> <li data-src="/goodsbycategory?firstId=91&secondId=91&title=%E6%97%A5%E6%9D%82" data-index="8" class="" style="width: 63px;"> <span class="item">日杂</span> </li> <li data-src="/goodsbycategory?firstId=310&secondId=310&title=%E9%A5%AE%E9%A3%9F" data-index="9" class="" style="width: 63px;"> <span class="item">饮食</span> </li> <li data-src="/goodsbycategory?firstId=88&secondId=88&title=%E5%B1%85%E5%AE%B6" data-index="10" class="" style="width: 63px;"> <span class="item">居家</span> </li> <li data-src="/goodsbycategory?firstId=288&secondId=288&title=%E6%89%8B%E6%9C%BA" data-index="11" class="" style="width: 63px;"> <span class="item">手机</span> </li> <li data-src="/goodsbycategory?firstId=335&secondId=335&title=%E7%AE%B1%E5%8C%85" data-index="12" class="" style="width: 63px;"> <span class="item">箱包</span> </li> <li data-src="/goodsbycategory?firstId=89&secondId=89&title=%E9%85%8D%E4%BB%B6" data-index="13" class="" style="width: 63px;"> <span class="item">配件</span> </li> <li data-src="/goodsbycategory?firstId=155&secondId=155&title=%E5%A9%B4%E7%AB%A5" data-index="14" class="" style="width: 63px;"> <span class="item">婴童</span> </li> <li data-src="/goodsbycategory?firstId=114&secondId=114&title=%E5%87%BA%E8%A1%8C" data-index="15" class="" style="width: 63px;"> <span class="item">出行</span> </li> <li data-src="/brands?id=83&title=%E5%93%81%E7%89%8C" data-index="16" class="" style="width: 63px;"> <span class="item">品牌</span> </li> </ul> </div> </div> <a class="cart"></a>
css代码
.root{ margin: 0; padding: 0;}.header{ width: 100%; height: 48px; background: #333; font-size: 14px; position: relative; z-index: 5;}.header-content{ display: block; width: 340px; float: right; line-height: 48px;}.header,.header-content a, .header-content p,#header-line,.mobile-icon{ display: inline-block; text-decoration: none; color: #e7e7e7; margin-left: 5px;}#header-line { vertical-align: middle; border-right: 1px solid #e7e7e7; border-color: #666; margin: 17px 3px 17px 6px; height: 16px;}.moblie-icon{ display: inline-block; width: 25px; height: 25px; background:url(../img/mobile.png); background-size: 25px 25px; position: relative; top:7px;}.container { width: 1080px; margin: 0 auto; height:130px; text-align: center; font-size: 12px; margin-top: 15px;}.logo{ background: url(../img/logo.png) 50% no-repeat; float: left; width: 123px; height: 45px; background-size: 100%;}.search-form { float: right; position: relative; right: 10px; width: 246px; padding-left: 35px; padding-top: 18px; height: 32px; border-bottom: 1px solid #e7e7e7; transition: all .3s;}.search-form .search-icon { position: absolute; left: -5px; top: 23px; display: block; z-index: 2; text-align: center; outline: 0; font-size: 14px; background: url(../img/search.png) 40%; width: 20px; height: 20px; background-size: 100%;}.search-text{ z-index: 1; width: 245px; height: 32px; line-height: 32px;}.search-text input{ width: 100%; border: none; font-size: 14px; outline: 0;}.cart{ float:right; background: url(../img/cart.png); width: 20px; height: 20px; background-size: 100%; display: inline-block; position: relative; right:120px; bottom: 108px;}.nav-list{ padding: 0; height: 50px; position: relative; top: 30px;}.nav-list li { margin-left: -3px; height: 46px; cursor: pointer; display: inline-block;}ul,li { list-style: none; display: inline-block;}.nav-list li .item { display: inline-block; float: left; margin-left: 0; padding-bottom: 5px; cursor: pointer; color: #333; font-size: 14px; border-bottom: 2px solid #fff; transition: all .6s; padding-right: -50px;}.list{ display: block; height: 50px; position: relative; margin-top: 0px; z-index: 8;}
效果图
阅读全文
0 0
- 网页临摹12.04
- 网页临摹12.08
- 临摹
- 观/临摹 他人网页/代码 所得琐碎tips
- 学漫画怎么临摹?绘画临摹技巧!
- 郁闷的临摹稿
- 临摹的作品
- 临摹谷歌图标
- 雪糕棒临摹
- 临摹写实小票
- javascript笔记:临摹jQuery(二)
- Android实现摄像头临摹效果
- 问答:临摹是为了什么
- 12月8日米家有品临摹
- 戏说DataWindow的“移植”和“临摹”
- [32期] 临摹多特首页
- 3.13日临摹旅游名片界面2.2
- 白色情人节临摹盒子登陆页面3.14
- 阿联酋用阿里云采油,研究成果或将提高原油产量
- spingboot @EnableScheduling使用
- Windows 多人连接远程服务器
- 新登月计划:阿里云ET大脑获颁世界互联网领先科技成果奖
- String类学习代码
- 网页临摹12.04
- 在 Azure Resource Manager 模板中使用托管磁盘
- 【我的Java笔记】多线程_等待唤醒机制(生产消费者模式)
- 阿里云推出云呼叫中心,助力企业强势打造端到端的一站式热线服务
- Python的交互模式和直接运行.py文件有什么区别?
- 如何在cylinux环境下下载pip和安装python所需模块
- 关于H5中的<video></video>标签的用法总结
- 0/1背包问题
- 【无人驾驶量产得靠128线廉价激光雷达,中国将是最大市场】专访Velodyne自动驾驶VP