web前端的日常更新8.8

最新推荐文章于 2024-09-30 15:42:36 发布

W晚睡W

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量132

点赞数 2

本文链接：https://blog.csdn.net/m0_72174711/article/details/126235623

版权

今天我还是和大家介绍一下之前的作业，这个作业多处用了响应式布局的内容，所以说也是一个比较重要的内容了。

1.作业样式

2.作业代码样式

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./reset.css" />
    <!-- 引入css样式 -->
    <link rel="stylesheet" href="./index.css" />
    <!-- 引入图标 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3300469_5p7ecspmd2b.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="Wrapper">
      <!-- 导航区 -->
      <div class="nav-wrapper">
        <div class="nav">
            <!-- 最小屏幕的导航 -->
          <div class="title clearfix">
            <h2>Bootstrap中文文档</h2>
            <a href="#" class="titleIcon">
              <i class="iconfont icon-navicon"></i>
            </a>
          </div>
          <div class="nav-list">
              <!-- 导航左侧 -->
            <ul>
              <h2 class="navListH2"><a href="#">Bootstrap中文文档</a></h2>
              <li><a href="#">入门</a></li>
              <li><a href="#">全局css样式</a></li>
              <li><a href="#">组件</a></li>
              <li><a href="#">JavaScript插件</a></li>
              <li><a href="#">定制</a></li>
              <li><a href="#">网站实例</a></li>
            </ul>
            <!-- 导航右侧 -->
            <ol class="nav-list-right">
                <li>
                  <a href="#"
                    >v3
                    <i class="iconfont icon-zhcc_xiangxiajiantou" style="font-size: 12px;"></i>
                  </a>
                </li>
                <li><a href="#">优站精选</a></li>
                <li><a href="#">官方博客</a></li>
                <li><a href="#">返回Bootstrap中文网</a></li>
              </ol>
          </div>
        </div>
      </div>
      <!-- 背景图片 -->
      <div class="background-pic">
        <img src="./67aa787afe.jpg" alt="" />
      </div>
    </div>
    <script>
      var titleIcon = document.querySelector(".titleIcon>i");
      var navList=document.querySelector(".navList");
      titleIcon.addEventListener(
        "click",
        function () {
        console.log('打开，关闭');
        },
        false
      );
    </script>

3.作业css样式

/* 整体 */
body {
    height: 2000px;
}

.nav-wrapper {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.nav {
    padding: 0 15px;
    color: #523e78;
    height: 50px;
    line-height: 50px;
}

.nav>.title {
    margin: 0 auto;

}

.title>h2 {
    float: left;
}

.title>.titleIcon {
    float: right;

}

.title>.titleIcon>i {
    color: #523e78;
    font-size: 14px;
    height: 34px;
    line-height: 20px;
    padding: 9px 10px;
    border-radius: 5px;
}

.title>.titleIcon>i:hover {
    background-color: #ccc;
}

.title>.titleIcon>i:active {
    background-color: #ccc;

}

.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* 设置导航类表 */
.nav-list {
    margin: 0 -15px;
    display: none;
}

.nav-list li:hover {
    background-color: #f9f9fa;
}

.nav-list a {
    color: #523e78;
    padding: 10px 15px;
}

.background-pic {
   padding-top: 50px;
}

/* 图片自适应 */
img {
    width: 100%;
}


/* 响应布局 */
@media all and (min-width:768px) {
    .nav{
        width: 720px;
        margin: 0 auto;
        padding: 0 40px;
    }
    /* 控制导航显示与展示 */
    .title{
        display: none;
    } 

    .nav-list{
        display: block;
    }
    .nav-listH2{
        display: block;
    }
    .nav-list-right{
        display: none;
    }
    .nav-list li,.nav-list h2{
        float: left;
    }
    .navList >ul>li{
        font-size: 14px;
        font-weight: bold;
    }
    
}
@media all and (min-width:968px) {
    .nav{
        width: 100%;
        max-width: 1140px;
        margin: 0 auto;
    }
    .nav-list-right{
        display: block;
        float: right;
    }
    .navList >ol>li{
        font-size: 14px;
        font-weight: bold;
    }
}

4.css样式2

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, input,button,label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{
  display: block;
}
ol, ul, li{
  list-style: none;
}
blockquote, q{
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
  content: '';
  content: none;
}
table{
  border-collapse: collapse;
  border-spacing: 0;
}
 
/* custom */
a{
  color: #7e8c8d;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track-piece{
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical{
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal{
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
html, body{
  width: 100%;
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
}
body{
  line-height: 1;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html{
  overflow-y: scroll;
}
 
/*清除浮动*/
.clearfix:before,
.clearfix:after{
  content: " ";
  display: inline-block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix{
  *zoom: 1;
}
 
/*隐藏*/
.dn{
  display: none;
}