一、品优购网页练习（部分）

最新推荐文章于 2024-11-01 15:19:31 发布

COLDEHY

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量356

点赞数 5

文章标签： html css html5

本文链接：https://blog.csdn.net/qq_63342197/article/details/136609791

版权

本文详细展示了HTML和CSS代码片段，涉及网站头部设计（包括logo、搜索栏、热门标签等）以及导航菜单的实现，包括快捷导航模块和下拉菜单的样式。

摘要由CSDN通过智能技术生成

一、效果展示：

二、代码部分：

1.html代码部分：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>品优购</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="shortcut icon" href="favicon.ico" />
</head>

<body>
  <!-- 快捷导航模块 -->
  <section>
    <div class="shortcut w">
      <ul class="shortcut_left">
        <li><a href="#">品优购欢迎您！</a></li>
        <li><a href="#">请登录</a></li>
        <li><a href="#">免费注册</a></li>
      </ul>
      <ul class="shortcut_right">
        <li>
          <a href="#">我的订单</a>
        </li>
        <li>
          |
        </li>
        <li class="arrow-icon">
          <a href="#">我的品优购</a>
        </li>

        <li>
          |
        </li>
        <li>
          <a href="#">品优购会员</a>
        </li>

        <li>
          |
        </li>
        <li>
          <a href="#">企业采购</a>
        </li>

        <li>
          |
        </li>
        <li class="arrow-icon">
          <a href="#">关注品优购</a>
        </li>
        <li>
          |
        </li>
        <li class="arrow-icon">
          <a href="#">客户服务</a>
        </li>

        <li>
          |
        </li>
        <li class="arrow-icon">
          <a href="#">网站导航</a>
        </li>

      </ul>
    </div>
  </section>

  <div class="w header">
    <div class="logo">
      <h1><a href="#" title="品优购商城">品优购商城</a></h1>
    </div>
    <ul class="searchlan">
      <li><input type="text"></li>
      <li><button>搜索</button></li>
      <li><button><a>&nbsp;我的购物车</a>&nbsp;></button></li>
    </ul>
    <ul class="hotwords">
      <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>
  <div class="nav w">
    <ul>
      <li class="first_nav"><a href="#">全部商品分类</a></li>
      <li class="second_nav"><a href="#">服装城</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="#">团购</a></li>
      <li><a href="#">拍卖</a></li>
      <li><a href="#">有趣</a></li>
    </ul>
  </div>
  <div class="line"></div>
  <div class="dropdown w">
    <ul class="dropdown_nav">
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#" class="special">测试文字</a></li>
      <li><a href="#" >测试文字</a></li>
      <li><a href="#">测试文字</a></li>
    </ul>
    <ul class="center_shop">
      <li><a href=""><img src="../shoping/images/center.png" alt=""></a></li>
    </ul>
    <ul class="jianbao">
     <li class="first_jianbao"><a href="#">品优购快报</a><a href="#">更多 ></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="#">[特惠] 替换文字</a></li>
    </ul>
    <ul class="function">
      <li><a href="#">话费</a></li>
      <li><a href="#">话费<i class="xiaozaizi">减</i><i class="xiaozaizi1"></i></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="#">话费</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="#">话费</a></li>
    </ul>
    <ul class="little_photo">
      <li>
        <a href="#"><img src="../shoping/images/images/01gai_04.png" alt=""></a>
      </li>
    </ul>
    <ul class="bottom_photo">
      <li><a href="#"><img src="../shoping/images/images/01-电商-主页-gai_03.png" alt=""></a></li>
    </ul>
  </div>
</body>

</html>

2.css代码部分：

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle;
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

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

.clearfix {
    *zoom: 1;
}

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

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

/* 快捷导航模块 */
section {
    height: 30px;
    background-color: #f1f1f1;
}

section .shortcut {
    height: 30px;
}

.shortcut .shortcut_left li {
    float: left;
    padding-left: 12px;
    line-height: 30px;
}

.shortcut .shortcut_left li:first-child {
    padding: 0;
}

.shortcut .shortcut_left li:last-child a {
    color: #c81623;
}

.shortcut .shortcut_right {
    float: right;
    line-height: 30px;
}

.shortcut .shortcut_right li {
    float: left;
    padding-right: 12px;
}

.shortcut .shortcut_right li:last-child {
    padding-right: 0;
}

.shortcut .shortcut_right .arrow-icon::after {
    content: '\e91e';
    font-family: 'icomoon';
}

.header {
    position: relative;
    margin-top: 27px;
    height: 61px;
}


/* 头部制作 */
.logo {
    position: absolute;
    width: 171px;
    height: 61px;
}

.logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo1.png) no-repeat;
    font-size: 0;
}




.header .searchlan {
    position: absolute;
    left: 344px;
    margin-top: 0;
    width: 789px;
    height: 35px;
}

.header .searchlan li {
    float: left;
}

.header .searchlan li:last-child {
    float: right;
}

.header .searchlan li:first-child {
    border: #c81623 solid 1px;
    border-right: transparent;
    float: left;
}

.header .searchlan li:first-child input {
    width: 455px;
    height: 35px;
    border: transparent;
}

.header .searchlan li:first-child {
    border: #c81623 solid 1px;
    border-right: transparent;
    float: left;
}

.header .searchlan li:nth-child(2) button {
    width: 83.5px;
    height: 37px;
    background-color: #c81623;
    border: transparent;
    line-height: 37px;
    color: #ffffff;
    font-weight: 550;
}

.header .searchlan li:nth-child(3) button {
    width: 140px;
    height: 35px;
    line-height: 35px;
    background-color: #f7f7f7;
    border: #dfdfdf 1px solid;
}

.header .searchlan li:nth-child(3) button::after {
    float: left;
    margin-left: 15px;
    content: '\e93a';
    font-family: 'icomoon';
}


.header .hotwords {
    position: absolute;
    bottom: 0px;
    left: 359px;
    height: 12px;

}

.header .hotwords li {
    float: left;
    padding-right: 22px;
    font-size: 9px;

}

.header .hotwords li:first-child a {
    color: #c81623;
}

.nav {
    margin-top: 24px;
    height: 45px;
}

.nav ul li {
    float: left;
    padding-left: 50px;
    line-height: 45px;
}

.nav ul .first_nav {
    padding: 0 58px;
    background-color: #b1191a;
}

.nav ul .second_nav {
    padding-left: 40px;
}

.nav ul li a {
    color: #333333;
    font: 16px "microsoft yahei";
}

.nav ul .first_nav a {
    color: #ffffff;
}

/* 红线开发 */
.line {
    height: 2px;
    background-color: #b1191a;
}


.dropdown {
    position: relative;
    height: 641px;
}

.dropdown .dropdown_nav {
    position: absolute;
    width: 212px;
    height: 470px;
    background-color: #c81623;
}




.dropdown .dropdown_nav li a {
    padding-left: 10px;
    display: block;
    height: 31px;
    line-height: 31px;
    color: #ffffff;
}

.dropdown .dropdown_nav li a:hover {
   background-color: #ffffff;
   color: #c81623;
}



.dropdown .dropdown_nav li a i {
    float: right;
    margin-right: 10px;
}

.center_shop {
   position: absolute;
   top: 10px;
   left: 222px;
}

.center_shop li a img {
    width: 725px;
    height: 460px;
}

.jianbao {
    position: absolute;
    top: 10px;
    right: 0px;
    width: 248px;
    height: 165px;
   border: #e4e4e4 solid 1px;
   background-color: #ffffff;
}
.jianbao li  {
margin-top: 4px;
font-size: 14px;
color: #333333;
}
.jianbao .first_jianbao {
  margin-top: 0;
  padding: 5px;
   font-size: 14px;
   border-bottom: #e4e4e4 dashed 1px;
   line-height: 20px;
}
.jianbao li a {
   padding-left: 16px ; 
}
.jianbao .first_jianbao a:last-child {
    float: right;
    margin-right: 14px;
}


.function {
    position: absolute;
    right: 0;
    top: 175px;
    width: 248px;
    height: 210px;
  
    border: #b1191a solid 0.5px;
}
.function li{
   float: left;
   border: #c81623 solid 0.5px;
}
.function li a {
    position: relative;
    display: inline-block;
    padding: 10px 18px;
    height: 67.9px;
}
.function li a::before {
    display: block;
    float: top;
   content: "\e958";
   font-family: 'icomoon';
   font-size: 21px;
}


.function li a .xiaozaizi {
    padding-left: 4px;
    position: absolute;
    display: block;
   right: 0;
   top: 0;
width: 20px;
    height: 30px;
   background-color: green;
   color: #ffffff;
}

.function li a .xiaozaizi1 {
    position: absolute;
    display: block;
    right: 0;
    top: 15px;
    width: 20px;
    height: 30px;
    border-radius: 10px 10px 0 0;
    background-color: #ffffff;
}

.little_photo {
    position: absolute;
    right: 0px;
    bottom: 172px;
}

.bottom_photo li a {
display: block;
}

.bottom_photo {
    position: absolute;
    bottom: 0;
}