作业和笔记

最新推荐文章于 2024-09-28 21:20:29 发布

aaaBsBsBsB

最新推荐文章于 2024-09-28 21:20:29 发布

阅读量498

点赞数 17

文章标签：笔记前端 css

本文链接：https://blog.csdn.net/aaaBsBsBsB/article/details/134689960

版权

<!DOCTYPE html>
<html lang="en">
<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">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .nav {
        position: fixed;
        width: 1534.5px;
        height: 40px;
        border-bottom: 1px solid #070707;
        background-color: #000;
        border-top-left-radius: 10px;
    } 
    .one{
        margin: 0 auto;
        height: 20px;
        text-align: center;
        list-style: none;
    }
    .one li {
      float: left;
      border-right: 1px solid #ccc;
      box-sizing: border-box;
      line-height: 40px;
      text-align: center;
    }
    .one .last {
     border-right: none;
     float: right;
     border-right: 1px solid #ccc;
     box-sizing: border-box;
     line-height: 40px;
     text-align: center;
    }
 
 
    .one li a {
      display: block;
      height: 40px;
      text-decoration: none;
      color: white
 
    }
 
    .one li .app {
      position: relative;
    }
 
    .one li .app .code1 {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 40px;
      border: 1px solid #ccc;
    }
    .app img{
        width: 50px;
        height: 50px;
        display: none;
    }
    .app:hover img{
        display: block;
    }
    .box{
        position: relative;
        top: 50px;
        position: fixed;
        width: 1534.5px;
        height: 100px;
        border-bottom: 1px solid white;
    }
    .left{
        position: absolute;
        top: 11px;
        width: 71px;
        height: 71px;
    }
    .right{
        position: absolute;
        top: 11px;
        width: 374px;
        height: 65px;
        right: 0;
    }
    .two{
        position: absolute;
        left: 110px;
        right: 434px;
        margin: 0 auto;
        width: 887.5px;
        height: 100px;
        text-align: center;
        list-style: none;
    }
    .two li {
      float: left;
      width: 98.6px;
      box-sizing: border-box;
      line-height: 80px;
      text-align: center;
    }
    .two li a {
    display: block;
    height: 100px;
    text-decoration: none;
    color: #000;
    }
    .main{
        position: relative;
        top: 160px;
        position: fixed;
        width: 1534.5px;
        height: 460px;
        background-color: white;
    }
    .three{
        position: absolute;
        width: 234px;
        height: 460px;
        margin: 0 auto;
        text-align: center;
        list-style: none;
        top: 30px;
    }
    .three li{
        width: 234px;
        height: 42px;
        box-sizing: border-box;
        text-align: center;
        background-color: #69656599;
    }
    .three li a {
    display: block;
    height: 234px;
    height: 42px;
    text-decoration: none;
    color: white;
    }
    .main2{
        left: 234px;
        height: 460px;
        width: 1074.5px;
    }
 </style>
</head>
<body>  
  <div class="nav">
    <ul class="one">
      <li><a href="#">小米官网 </a></li>
      <li><a href="#">小米商城 </a></li>
      <li><a href="#">小米澎湃OS</a></li>
      <li><a href="#">IoT</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="#" class="app">下载app<img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="" class="code1"></a></li>
      <li><a href="#">Select Location</a></li>
      <li class="last"><a href="#">购物车</a></li>
      <li class="last"><a href="#">消息通知</a></li>
      <li class="last"><a href="#">注册</a></li>
      <li class="last"><a href="#">登录</a></li>
    </ul>
  </div>
  <div class="box">
    <div class="left"><img src="./7705c022ba6df2be4f4e2307022c8d4.png" alt=""></div>
    <div class="right"><img src="./3457bf0651d827aafbf7ce3613d0981.png" alt=""></div>
    <ul class="two">
        <li><a href="#">Xiaomi手机</a></li>
        <li><a href="#">Redmi手机</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 class="main">
        <div class="main1">
            <ul class="three">
                <li class="abc"><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>
        </div>
        <div class="main2"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fb7a27a273816b4772fc29c67e6630ec.jpg?thumb=1&w=1533&h=575&f=webp&q=90" alt=""></div>
    </div>
  </div>
</body>
</html>

css的权重当不同选择器的样式设置发生冲突时，高权重选择器的样式会覆盖低权重的样式
标签选择器:0001
class选择器：0010
id选择器：0100
伪类选择器：0010
包含选择器的去那种等于权重之和
属性选择器：0010
伪元素选择器：0001
内联样式：1000
轮廓线 outline（文本框外围）none（无）
浮动 float（文字环绕图片）
一个盒子发生浮动，会失去原来的位置（脱离文档流）
多个盒子同时浮动，盒子会排成一排（BFC）
浮动出现的问题
外边距 margin：px（上下）px（左右)
margin: px(上）px（左右）px（下）
margin：px（上）px（右）px（左）px（下）
内边距 padding：px；
外边距margin塌陷overflow：hidden
auto自适应（上下不能用）
清除默认的内外边距 *（通配符：选中所有标签){
margin:0;
padding:0;
}

css3弹性盒子 display：flex
flex-direction（设置主轴方向）
flex-wrap：wrap（允许弹性盒子的子项进行换行）
justify-content：center；（主轴对齐方式)
justify-content：space-around（把剩余的空间平均的分配给每个元素）
justify-content：space-between（两边元素贴边，剩余平分）
align-items：center；（交叉轴上元素的对齐方式）
align-content：space-around
flex-grow
flex-shrink（不压缩）
align-self（修改自己的对齐方式）
grid布局