品优购案例 html css

oounnn

已于 2022-03-06 15:19:15 修改

阅读量475

点赞数

于 2022-03-06 15:12:45 首次发布

本文链接：https://blog.csdn.net/weixin_46524843/article/details/123310599

版权

品优购页面

分为三个页面，分别是首页（index）列表页（list）注册页（register）
favicon
TDK

首页
index
列表页
list
注册页
register

base.css

/*初始化*/
* {
   
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
li {
   
    list-style: none;
}
input,button {
   
    outline: none;
}
a {
   
    text-decoration: none;
    color: #666666;
}
a:hover {
   
    color: #c81623;
}
img {
   
    border: 0;/*为了照顾低版本浏览器，图片外面有链接，会有边框问题*/
    vertical-align: middle;/*行内元素和文字垂直居中，图片底部有空隙问题*/
}
body {
   
    /*抗锯齿性：在页面放大时，文字仍然清晰*/
    -webkit-font-smoothing: antialiased;
}

/*清除浮动*/
.clearfix:after {
   
    visibility: hidden;
    clear: both;
    display: block;
    content: "";
    height: 0;
}
.clearfix {
   
    *zoom: 1;
}

/*版心*/
.w {
   
    width: 1200px;
    margin: 0 auto;
}

common.css

/*字体图标*/
@font-face {
   
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?5zc4w5');
    src:  url('../fonts/icomoon.eot?5zc4w5#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?5zc4w5') format('truetype'),
    url('../fonts/icomoon.woff?5zc4w5') format('woff'),
    url('../fonts/icomoon.svg?5zc4w5#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/*shortcut start*/
.shortcut {
   
    height: 31px;
    background-color: #f1f1f1;
    line-height: 31px;
    font-size: 12px;
    color: #666666;
}
.shortcut_left {
   
    float: left;
    font-weight: 400;
}
.shortcut_right {
   
    float: right;
}
.shortcut_right li {
   
    float: left;
}
.shortcut_right li a {
   
    padding: 0 15px;
    border-right: 1px solid #666666;
}
.shortcut_right li .clearlast_border {
   
    border-right: 0;
}
/*字体图标*/
.shortcut_right li .arrow_icon::after {
   
    content: "\e917";
    font-family: 'icomoon';
}
/*shortcut end*/

/*header start*/
.header {
   
    margin: 25px auto;
    height: 61px;
}
.logo {
   
    float: left;
    width: 171px;
    height: 61px;
}
.logo h1 a {
   
    /*一定要转换成块元素，并添加宽高，背景颜色才能添加成功*/
    display: block;
    width: 171px;
    height: 61px;
    background: url("../images/sprite.png") -372px -10px;
}
.search {
   
    float: left;
    margin-left: 180px;
    width: 534px;/*454+80=534*/
    height: 36px;
    background-color: orange;
}
.search input {
   
    float: left;
    padding-left: 10px;
    width: 454px;
    height: 36px;
    border: 2px solid #b1191a;
    font-size: 12px;
}
.search button {
   
    float: left;
    width: 80px;
    height: 36px;
    border: 2px solid #b1191a;
    background-color: #b1191a;
    font-size: 16px;
    color: #ffffff;
}
.hotwords {
   
    float: left;
    margin-left: 180px;
    width: 534px;
    height: 25px;/*61-36=25*/
    line-height: 25px;
}
.hotwords ul li {
   
    float: left;
    padding: 0 15px;
    font-size: 12px;
}
.shopcar {
   
    /*父亲相对定位*/
    position: relative;
    float: left;
    margin-top: -36px;
    margin-left: 100px;
    width: 140px;
    height: 35px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}
.shopcar span {
   
    position: absolute;
    left: 35px;
    line-height: 35px;
    font-size: 12px;
    color: #666666;
}
.shopcar .arrow_icon::after {
   
    content: "\e91d";
    font-family: 'icomoon';
}
.car {
   
    position: absolute;
    top: 50%;
    left: 15px;
    margin-top: -7px;
    width: 19px;
    height: 15px;
    background: url("../images/sprite.png") -415px -89px;
}
.count {
   
    position: absolute;
    left: 90px;
    top: -5px;
    padding: 0 3px;
    /*不要给宽度，个数是不一定的，会撑开盒子*/
    /*width: 17px;*/
    height: 14px;
    border-radius: 5px 5px 5px 0;
    background-color: #e60012;
    line-height: 14px;
    text-align: center;
    font-size: 12px;
    color: #ffffff;
}
/*header end*/

/*nav start*/
.nav {
   
    height: 47px;
    border-bottom: 2px solid #b1191a;
}
/*dropdown part*/
.dropdown {
   
    float: left;
}
.dt {
   
    width: 210px;
    height: 45px;
    background-color: #b1191a;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
}
.dd {
   
    display: none;
}
.dd ul li a {
   
    display: block;
    padding: 0 10px;
    width: 210px;
    height: 31px;
    background-color: #c81623;
    line-height: 31px;
    font-size: 14px;
    color: #ffffff;
}
.dd ul li a::after {
   
    float: right;
    content: "\e91d";
    font-family: 'icomoon';
}
.dd ul li a:hover {
   
    background-color: #ffffff;
    color: #c81623;
}
/*navitems part*/
.navitems {
   
    height: 45px;
    line-height: 45px;
    float: left;
}
.navitems ul li {
   
    float: left;
    padding: 0 25px;
    font-size: 16px;
}
/*nav end*/

/*footer start*/
.footer {
   
    margin-bottom: 100px;
    height: 415px;
    background-color: #f5f5f5;
}
.footer .w {
   
    overflow: hidden;/*塌陷*/
}
/*mod_service part*/
.mod_service {
   
    margin-top: 50px;
    height: 80px;
    border-bottom: 1px solid #cccccc;
}
.mod_service ul li {
   
    float: left;
    width: 300px;/*1200/4=300*/
    color: #666666;
}
.mod_service ul li div {
   
    float: left;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    background: url("../images/sprite.png") -252px -2px;
}
.mod_service ul li h5 {
   
    font-size: 14px;
}
.mod_service ul li p {
   
    font-size: 12px;
}
/*mod_help part*/
.mod_help {
   
    padding-top: 20px;
    height: 185px;
    border-bottom: 1px solid #cccccc;
    color: #666666;
}
.mod_help dl {
   
    float: left;
    width: 200px;
}
.mod_help dl dt {
   
    font-size: 16px;
    margin-bottom: 10px;
}
.help {
   
    text-align: center;
}
.mod_help dl dd {
   
    font-size: 12px;
}
.help h5 {
   
    font-size: 16px;
    font-weight: 400;
}
.help p {
   
    font-size: 12px;
}
.help div {
   
    display: inline-block;
    width: 90px;
    height: 90px;
    background: url("../images/help_code.jpg");
}
/*mod_copyright part*/
.mod_copyright {
   
    margin-top: 10px;
    text-align: center;
}
.links a {
   
    padding-right: 10px;
    border-right: 1px solid #666666;
    font-size: 12px;
}
.links .clearlast_border {
   
    border-right: 0;
}
.mod_copyright p {
   
    margin-top: 10px;
    font-size: 12px;
    color: #666666;
}
/*footer end*/

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--favicon-->
    <link rel="shortcut icon" href="favicon.ico">
    <!--TDK-->
    <title>品优购商城-综合网购首选、正品低价、品质保障、配送及时、轻松购物</title>
    <meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品，便捷、诚信的服务，为您提供愉悦的网上购物体验！">
    <meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑，MP3，CD，VCD，DV，相机，数码，配件，手表，存储卡">
    <link rel="stylesheet" href="css/base.css"><!--初始化样式-->
    <link rel="stylesheet" href="css/common.css"><!--头部+尾部-->
    <link rel="stylesheet" href="css/index.css"><!--index页面-->
    <!--
    1 logo SEO
    2 字体图标
    dropdown dt dd a::after添加字体图标
    (添加字体图标有两种方式 1class="arrow_icon" 2元素:after)
    3 lifeservice 4个小li要在一行显示，并且随着页面放大和缩小不会改变：ul改大，给lifeservice多余部分隐藏
    4 a标签失效原因：被覆盖
    解决：给父级元素添加position:relative z-index:999
    ./ 表示当前目录
    -->
</head>
<body>
<!--common: shortcut start-->
<div class="shortcut">
    <div class="w">
        <h6 class="shortcut_left">
            品优购欢迎您！
            <a href="#">请登录</a>
            <a href="./register.html" target="_blank">免费注册</a>
        </h6>
        <!--用到字体图标-->
        <ul class="shortcut_right">
            <li><a href="#">我的订单</a></li>
            <li><a href="#" class="arrow_icon">我的品优购</a></li>
            <li><a href="#">品优购会员</a></li>
            <li><a href="#">企业采购</a></li>
            <li><a href="#" class="arrow_icon">关注品优购</a></li>
            <li><a href="#" class="arrow_icon">客户服务</a></li>
            <li><a href="#" class="clearlast_border arrow_icon">网站导航</a></li>
        </ul>
    </div>
</div>
<!--shortcut end-->

<!--common: header start-->
<div class="header w">
    <!--logo part SEO-->
    <div class="logo">
        <h1><!--为了提权，告诉搜索引擎，这个地方很重要-->
            <!--a要转化成块元素，并添加宽高，背景才能添加成功-->
            <a href="./index.html" title="品优购"></a>
        </h1>
    </div>
    <!--search part-->
    <div class="search">
        <input type="text" placeholder="语言开发">
        <button>搜索</button>
    </div>
    <!--hotwords part-->
    <div class="hotwords">
        <ul>
            <li><a href="#">优惠购首发</a></li>
            <li><a href="#">亿元优惠</a></li>
            <li><a href="#">9.9元团购</a></li>
            <li><a href="#">每满99减30</a></li>
            <li><a href="#">办公用品</a></li>
            <li><a href="#">电脑</a></li>
            <li><a href="#">通信</a></li>
        </ul>
    </div>
    <!--chopcar part-->
    <div class="shopcar">
        <div class="car"></div>
        <span class="arrow_icon">我的购物车&nbsp;&nbsp;&nbsp;</span>
        <div class="count">8</div>
    </div>
</div>
<!--header end-->

<!--common: nav start-->
<div class="nav">
    <div class="w">
        <!--dropdown part dt dd-->
        <div class="dropdown">
            <div class="dt">全部商品分类</div>
            <div class="dd">
                <ul>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="./list.html" target="_blank">手机 数码 通信</a></li>
                    <li><a href="#">电脑 办公</a></li>
                    <li><a href="#">家居 家具 家装 厨具</a></li>
                    <li><a href="#">男装 女装 童装 内衣</a></li>
                    <li><a href="#">个护化妆</a></li>
                    <li><a href

最低0.47元/天解锁文章

oounnn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
品优购案例 html css

品优购页面分为三个页面，分别是首页（index）列表页（list）注册页（register）faviconTDK首页列表页注册页base.css/*初始化*/* { padding: 0; margin: 0; box-sizing: border-box;}li { list-style: none;}input,button { outline: none;}a { text-decoration: none;
复制链接

扫一扫