首页 > 编程知识 文章详情

Web前端从入门到入土

编程知识 更新时间:2023-05-03 01:29:06

拨云见雾

文章目录

  • 拨云见雾
    • 一、什么是HTML,CSS？
    • 二、宇宙第一编辑器VS Code
      • 2.1下载
      • 2.2VS Code快捷键
    • 三、Chrome浏览器
    • 四、深入了解网站开发
    • 五、Web三大核心技术
    • 六、HTML基础结构与属性
      • 6.1 结构
      • 6.2标签的属性
    • 七、HTML初始代码
      • 7.1如何快速创建html初始代码？
      • 7.2初始代码
    • 八、HTML中的注释
      • 8.1 写法
      • 8.2快捷键
      • 8.3意义
    • 九、 HTML语义化
      • 9.1好处
    • 十、标题及段落
    • 十一、文本修饰标签
      • 11.1 标签
    • 十二、图片标签与图片属性
    • 十三、引入文件的地址路径
    • 十四、链接跳转
    • 十五、跳转锚点
    • 十六、特殊符号
    • 十七、列表标签
      • 17.1无序列表
      • 17.2有序列表
      • 17.3定义列表
    • 十八、嵌套列表
    • 十九、表格标签
    • 二十、表格属性
    • 二十一、表单标签
    • 二十二、表格表单组合实例
    • 二十三、div和span
    • 二十四、CSS基本语法
    • 二十五、内联样式和内部样式
    • 二十六、外部样式及两种写法
    • 二十七、 CSS中颜色表示法
    • 二十八、CSS背景样式
      • 28.1样式
    • 二十九、背景实现视觉差效果
    • 三十、CSS 边框样式
      • 30.1边框样式
      • 30.2边框实现三角形
    • 三十一、CSS文字样式
      • 31.1字体样式
      • 31.2字体大小
    • 三十二、CSS段落样式
      • 32.1样式
      • 32.2文本与段落的综合练习
      • 三十三、CSS复合样式
    • 三十三、CSS选择器
      • 33.1ID选择器
      • 33.2class选择器
      • 33.3标签选择器（TAG选择器）
      • 33.4群组选择器（分组选择器）
      • 33.5通配选择器
      • 33.6层次选择器
      • 33.7 属性选择器
      • 33.8伪类选择器
      • 33.9结构性选择器
    • 三十四、CSS样式的继承
    • 三十五、CSS优先级
    • 三十六、css盒子模型
      • 36.2CSS盒子模型的问题
    • 三十七、标签的分类
      • 37.1按类型
      • 37.2按内容
      • 37.3 按显示
      • 37.4显示框类型
    • 三十八、标签的嵌套规范
    • 三十九、溢出隐藏
    • 四十、透明度与手势
    • 四十一、最大、最小宽高
    • 四十二、css默认样式
    • 四十三、float浮动
    • 四十四、CSC位置
    • 四十五、CSS精灵
    • 四十六、css圆角
    • 四十七、pc端的布局

一、什么是HTML,CSS？

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。HTML
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS
它们是两种编程语言，一般情况下需要配合使用，是作为网站开发的初始语言。一个网站是由多个网页组成的每一个网页都是一个.html文件。

二、宇宙第一编辑器VS Code

2.1下载

  • Visual Studio Code VS Code来自微软，是一个开源的，基于Electron的轻量代码编辑器。

2.2VS Code快捷键

  • ctrl +a：全选

  • shift + end ：从头选中一行

  • shift + home ：从尾部选中一行

  • shift + alt + ⬇️：快速复制一行

  • tab：向后缩进

  • tab + shift ： 向前缩进

  • ctrl + c :复制

  • ctrl + s :保存

  • ctrl + x :剪切

  • ctrl+v：粘贴

  • ctrl + z：撤销

  • ctrl + y : 前进

  • shift + ⬆️或⬇️ ：快速移动一行

  • alt + 鼠标左键 ：多光标

  • ctrl + d :选择相同元素的下一个

  • 设置：文件->首选项->设置（大小、是否换行 word wrap)

三、Chrome浏览器

  • 下载地址goole chrome

  • 百度统计所占份额百度

  • 市场常见五大浏览器：IE浏览器（Internet explorer）、火狐浏览器（Firefox）、谷歌浏览器 （Chrome）、 苹果浏览器 （Safari）、欧朋浏览器 （Opera）

四、深入了解网站开发

  • UI设计师：设计稿

  • Web前端开发工程师（H5开发）：

  •       设计稿->代码  
     数据库里的数据->显示到页面

  • Web后端开发设计师 ：负责后台储存数据

五、Web三大核心技术

  • HTML：结构

  • CSS：样式

  • JavaScript :行为

六、HTML基础结构与属性

超文本标记语言（Hyper Text Markup Language)，标准通用标记语言下的一个应用，是网页制作必备的编程语言。

6.1 结构

  • 超文本：文本内容+非文本内容（图片、视频、音频等）
  • 语言 ：编程语言
  • 标记 ：格式：<单词> 标记又叫标签
        分类：单标签 <header>
  •        双标签<header></header>
  •    创建标签的快捷键 ：单词+ tab键-> <单词>
  •    标签可以上下排列，也可以组合嵌套。

6.2标签的属性

  • 来修饰标签的，设置当前标签的一些功能。
  • <标签  属性=‘‘值’’&emsp属性2=“值2”>
  • HTML常见标签：

七、HTML初始代码

每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。

7.1如何快速创建html初始代码？

    ! + tab键

7.2初始代码

<!DOCTYPE html>    文档声明：告诉浏览器这是一个html文件
<html lang="en">html    文件的最外层标签：包裹着所有html标签代码，lang="en"表示是一个英文网站，lang="zh-CN"表示是一个中文网站
   <head>
      <meta charest="UTF-8">  元信息：是编写网页中的一些辅助信息，"UTF-8"国际编码，让网页不出现乱码的情况
      <title>Document</title>   设置网页的标题
   </head>
   <body>
   显示网页内容的区域
   </body>
</html>

八、HTML中的注释

8.1 写法

<!--注释的内容-->   在浏览器中看不到注释的内容，只能在代码中看到注释的内容。

8.2快捷键

  • 快速删除注释：shift + alt + a
  • 快速添加注释：ctrl + /

8.3意义

  • 1.把暂时不用的代码注释起来，方便以后使用。
  • 2.对开发人员进行提示。

九、 HTML语义化

所谓HTML语义化指的是，根据网页中内容的结构，选择适合自己的HTML标签进行编写。

9.1好处

  • 1.在没有CSS的情况下，页面也能呈现出很好的内容结构.

  • 2.有利于SEO,让搜索引擎爬虫更好的理解网页。

  • 3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。

  • 4.便于团队开发和维护。

十、标题及段落

  • h标签，p标签
  • 标题 双标签 <h1></h1>-------<h6></h6>从上至下逐级递减在一个网页中h1标题最重要，并且一个.html文件中只能出现一次h1标签，h5,h6标签在网页中不经常使用
  • 段落 双标签 <p></P>

十一、文本修饰标签

11.1 标签

  • 强调 ->双标签 ：<strong></strong> <em></em>

  • 区别：1.写法和展示效果是有区别的，strong是对文本加粗，em是对文本斜体

  •    2.strong的强调性更强，em强调性更弱

  • 下标：<sub></sub>

  • 上标：<sup></sup>

  • 删除文本：<del></del>

  • 插入文本：<ins></ins>

  • 注：一般情况下，删除文本都是和插入文本配合使用。

十二、图片标签与图片属性

  • img -> 单标签<img>
  • src :引入图片的地址。
  • alt :当图片出现问题的时候，可以显示一段友好的提示文字。
  • title :提示信息
  • width 、height :显示图片的大小（可要可不要，加上使空间固定，使段落之间位置不会变化，更美观）

十三、引入文件的地址路径

  • 1.相对路径 ：. 路径中表示当前路径
  •       . .在路径中表示上一级路径
  • 例：<img scr="../"被设置链接的图片的地址"alt="">
    注：初学者推荐使用相对路径更容易移植代码，找到相关文件
  • 2.绝对路径：能够找到文件所在的位置
    例：<img scr="E:/"被设置链接的图片的地址"alt="">
  • 注：网络地址只能写斜线/不能写反斜线\。

十四、链接跳转

  • <a>标签：双标签 <a></a>
  • herf属性：链接的地址
  • target属性：可以改变链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开：_black
  • <base>标签：单标签 作用：改变链接的默认行为 写在<head>当中

十五、跳转锚点

  • 在页内进行跳转

  • 实现一：   #号
           id属性

  • 实现二：   #号
           name属性
    注：name属性加给的是a标签

十六、特殊符号

编写一些文本时经常会遇到无法输入的字符，如®(注册商标）、©(版权符) 等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。

  • 格式：& + 字符
  • 作用：解决冲突（左右尖括号添加多个空格的实现）

十七、列表标签

17.1无序列表

  • <ul>、<li> ：列表的最外层容器、列表项
  • 注：ul和li必须是组合出现的，要符合嵌套规范，它们中间不允许添加其他标签
  • type属性：改变前面标记的样式（一般都是用CSS去控制）

17.2有序列表

  • <ol>、<li>：列表的最外层容器、列表项
  • 注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表
  • type属性：改变前面标记样式（一般都是用CSS去控制）

17.3定义列表

  • <dl> : 定义列表
  • <dt> :专业术语或名词
  • <dd>:对名词进行解释，描述

十八、嵌套列表

  • 列表之间可以相互嵌套，形成多层级的列表
 <ul>
    <li>
        辽宁省
        <ul>
            <li>沈阳</li>
            <li>大连</li>
            <li>丹东</li>
        </ul>
    </li>
    <li>
        河南省
        <ul>
            <li>郑州</li>
            <li>开封</li>
            <li>洛阳</li>
        </ul>

</li>
</ul>

十九、表格标签

  • :表格的最外层容器
  • :定义表格行
  • :定义表头
  • :定义表格单元
  • :定义表格标题
  • 语义化标签：tHead、tBody、tFood
  • 注：在一个table中，tBody是可以出现多次的，但tHead、tFoot只能出现一次
<table>
           <caption>天气预报</caption>
     <thead>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </thead>
        

        <tr>
            <td>2022年10月22日</td>
            
            <td>天气晴朗，适合出行</td>
        </tr>
        <tr>
            <td>2022年10月23日</td>
            <td>阴，不适合出行</td>
        </tr>
    </table>

二十、表格属性

  • border：表格边框
  • cellpadding：单元格内的空间
  • cellspacing：单元格之间的空间
  • rowspan:合并行
  • colspan:合并列
  • align:左右对齐方式（left center right）
  • valign:上下对齐方式 （top middle bottom)

二十一、表单标签

  • 1.表单input标签
<form>:表单的最外层容器
<input>:标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如：输入框、密码框、复选框等（单标签）

  • 2.表单相关标签
<textarea>:多行文本框
<select><option>:下拉菜单
<label>:辅助表单

<form action="http://www.baidu"><!-- 提交数据到百度上去 -->
        <h2>输入框:</h2>
        <input type="text">
        <h2>密码框:</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">葡萄
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>

二十二、表格表单组合实例

  • 表格表单之间可以相互组合形成数据展示效果
  • 注意要符合嵌套规则
<form action=""> 
   <table border="1" cellpadding="30">
      <tbody>
        <tr align="center">
            <td rowspan="4">总体信息</td>
            <td colspan="2">用户注册</td>
        </tr>
        <tr align="right">
            <td>用户名</td>
            <td><input type="text" placeholder="请输入用户名"></td>

        </tr>
        <tr align="right">
            <td>密码：</td>
            <td><input type="password" placeholder="请输入密码"</td>
        </tr> 
        <tr align="center">
            <td colspan="2">
                <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="reset">

            </td>
        </tr>
      </tbody>
   </table>
</form>

二十三、div和span

  • div(块）：
  • span (内联) ：用来修饰文字的，
 <div>
    <h2><a href="#">扬州 千锋教育官网<span style="color: greenyellow">html</span>-学员们信赖的IT培训机构入口</a></h2>
    <a href="#"><img src="https://ms.bdimg/pacific/0/pic/-2043055832_-580489177.jpg?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00" alt=""></a>
    <p><千锋教育官网 产研学相结合的14大IT课程助推新基建技术驱动新动能千锋教育官网 千锋教育整合互联网核心技术,坚持全程面授的教学模式></p>
    <a href="#">http://www.mobiletrain/page/it/?nanjing=mopinpaibdtg=pinpaipc=1808163666&jzl_kwd=140505814404&jzl_ctv=51717774389&jzl_mtt=1&jzl_adt=cl1&jzl_ch=11&jzl_act=2770118&jzl_cpg=113048638&jzl_adp=254823117&jzl_sty=50&jzl_dv=1</a>
  </div>

二十四、CSS基本语法

  • 格式：选择器{属性1:值1；属性2: 值2}
  • 单位：px -> 像素（pixel)、 % -> 百分比
  • 基本样式 ：weidth（宽）、background-color(背景色）、height(高）、
  • CSS注释：/*CSS注释的内容*/
<style>
        div{width: 25%;height: 100px;background-color: aquamarine;}
        span{ background-color: blue;}
     </style>
      <div>这是一个块</div>
      <div>又是一个块</div>
      <span>这是一个内联</span>

二十五、内联样式和内部样式

  • 内联（行内行间）样式：在HTML标签上加上style属性来实现的
  • 内部样式：在<style>标签内添加的样式
  • 注：内部样式的优点，可以复用代码。
  • 区别：内部代码可以复用，符合w3c的规范标准，尽量让结构和样式分开处理。
<style>
        div{ width: 100px;height: 100px;background-color: red;}
      </style>
      <div style="width: 100px;height: 100px;background-color: brown ;">这是一个块</div>
      <div style="width: 100px;height: 100px;background-color:cornflowerblue "></div>
      <div>这是一个块</div>
      <div>另外一个块</div>

二十六、外部样式及两种写法

外部样式：引入一个单独的CSS文件，name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址，通过@imput方式引入外部样式（这种方式有很多内容不建议使用）

<!--<link rel="styleness" href="./common.css">-->
      <title>Document</title>
      <style>
        @import url('./common.css');
      </style>
      <body>
        <div>这是一个块</div>
      </body>

二十七、 CSS中颜色表示法

  • 1.单词表示法：red、blue、green、yellow
  • 2.十六进制表示法：#000000(表示最小值，黑色)、#ffffff(表示最大值，表示白色)
  • 3.rgb三原色表示法：取值范围0～255
    rgb(255,255,255);
  • 4.获取颜色的工具：获取颜色的下载地址添加链接描述
    photoshop工具

二十八、CSS背景样式

28.1样式

  • background-color 背景色
  • background-image 背景图
        url背景地址）
        默认：会水平垂直都铺满背景图
  • background-repeat 平铺方式
  • repeat-x x轴平铺
  • repeat-y y轴平铺
  • repeat(x,y都进行平铺，默认值）
  • no-repeat 都不平铺
  • background-position :背景位置
    x y :number(px、%）| 单词
    x : left、center、right
    y :top、center、bottom
  • background- attachment ：背景图随滚动条移动的方式
  • 1）scroll ：默认值（背景位置是按照当前元素进行偏移的）
  • 2）fixed （背景位置是按照浏览器进行偏移的）

二十九、背景实现视觉差效果

<style>
        body{height:2000px}
        div{width:300px ;height: 300px;background-color:red ;background-image: url(.img/tree.jfif);background-repeat: repeat-x;background-position: 100px 50px;}
</style>
<body>
    <div></div>
</body>

三十、CSS 边框样式

30.1边框样式

  • border-style :边框样式
      solid:实线，dashed:虚线，dotted:点线
  • border-width :边框大小 px …
  • border-color : 边框颜色 red #f00 …
  • 边框也可以针对某一边框进行单独设置：border-left-style 中间是方向 left ,right,top,bottom
<style>
      /* div{ height: 300px;width: 300px;border-style: solid;background-color: aqua;border-width: 1px;} */
      /* div{ height: 300px;width: 300px;border-style: dashed;background-color: aqua;border-width: 30px;}*/
      div{ width: 300px;height: 300px;border-style: dotted;border-right-width: 10px;
       border-right-color: green;border-top-style: solid;border-top-width: 10px;border-top-color: red;}
   </style> 

<body>
    <div></div>
</body>

30.2边框实现三角形

 <style>
        div{ width: 0px;height: 0px ;
        border-top-color: white;
        border-top-style: solid;
        border-top-width: 30px;
        border-right-color: red;
        border-right-style: solid;
        border-right-width: 30px;
        border-bottom-color: white;
        border-bottom-style: solid;
        border-bottom-width: 30px;
        border-left-color: white;
        border-left-style: solid;
        border-left-width: 30px;}
    </style>
    <body>
        <div></div>
    </body>

  • 颜色：透明色 transparent
<style>
        body{ background-color: green;}
        div{ width: 0px;height: 0px ;
        border-top-color: transparent;
        border-top-style: solid;
        border-top-width: 30px;
        border-right-color: red;
        border-right-style: solid;
        border-right-width: 30px;
        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-bottom-width: 30px;
        border-left-color: transparent;
        border-left-style: solid;
        border-left-width: 30px;}
    </style>
    <body>
        <div></div>
    </body>

三十一、CSS文字样式

31.1字体样式

  • 1.font-family:字体样式
    英文字体 ：Arial、‘Times New Roman’
    中文字体 ：微软雅黑、宋体
  • 2.中文字体的英文名称
    微软雅黑：‘Microsoft YaHei’
    宋体：SimSun
  • 衬线体与非衬线体
    注意点：1.多个字体类型的设置目的（使设置的字体类型能适应更多的设备）
        2.引号的添加目的（有的字体中间有空格用引号表示它们是一个整体）
 <style>
    div{ font-family: Arial;}
    div{ font-family: Georgia, 'Times New Roman', Times, serif;}
    
</style> 
<body>  
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>this is a text</div>
    <p>this is a text</p>
</body>

31.2字体大小

-1. font-size:字体大小
默认大小：16px
写法：number(px) |单词（small、large…不推荐使用）

  • 2.font-weight:字体粗细
    模式：正常（normal）加粗（ bold）
    写法：单词（normal，bold）｜ number（100、200······900,100—500都是正常的，600—900都是加粗的）
  • 3.font- style：字体样式
    模式：正常（normal） 斜体（italic）
    写法：单词（normal、italic）
    注：oblique也是表示斜体，用的比较少，一般了解即可。
    区别：1.italic 带有倾斜属性字体的才可以设置倾斜操作。
        2.oblique 没有倾斜属性的姿态也可以设置倾斜操作。
  • 4.font-color:字体颜色

三十二、CSS段落样式

32.1样式

  • 1.text-decoration :文本装饰
       下划线：underline
       删除线：line-through
       上划线：overline
        不添加任何修饰：none
    注：添加多个文本修饰：line-through underline overline
  • 2.text-transform:文本大小写（针对英文段落）
       小写：lowercase
       大写：upcase
    注针对首字母大写：capitalze
<style>
    p{ width: 300px; text-decoration:  underline overline; }
    p{ width: 300px;  text-transform: lowercase;}
</style>
<body>
    <p>Visual Studio 2022 for Mac 完全融入了 macOS 体验， 整个 IDE 均使用原生控件，具有全新的深色模式和原生 macOS 辅助功能工具。</p>
    <p>jdhjnddgigfwjneufjnvjkjbnlblnbjbjbkjkhffufbjvkjvjbhjsk</p>
</body>

  • 3.text-ident:文本缩进
       首行缩进
       em单位：相对单位，lem永远都是字体大小相同

  • 4.text- align：文本对齐方式
    对齐方式（left、right、center、justify（两端对齐））

  • 5.line- height：定义行高
    什么是行高，一行文字的高度，上边距和下边距的等价关系。
    默认行高：不是固定值，而是变化的，根据当前字体的大小不再不断的变化
    取值：1.number(px) ｜ scale（比例值，跟文字大小）

  • 6.letter-spacing:字之间的间距

  • 7.word- spacing：词之间的间距（针对英文段落）

  • 8.对于英文和数学不能自动折行问题：
     1.word-break :break-all ;（非常强烈的折行）
     2.word-wrap :break-word ;(不是非常强烈的折行 会产生一些空白区域）

<style>
   /* p{ width: 300px; text-decoration:  underline overline; }*/
   /* p{ width: 300px;  text-transform: lowercase;}*/
  /* p{  text-align: justify;}*/
   /*p{  text-align: 30px;}*/
  /* p{ line-height: 40px;}*/
  div{ width: 300px;height: 300px;border: 1px solid red ;word-break: break-all;}

```html
</style>
<body>
    <p>Visual Studio 2022 for Mac 完全融入了 macOS 体验， 整个 IDE 均使用原生控件，具有全新的深色模式和原生 macOS 辅助功能工具。当我听说她被捕时，我感到很惊讶，因为我认为她是那种害怕自己影子的胆小鬼。</p>
    <p>jdhjnddgigfwjneufjnvjkjbnlblnbjbjbkjkhffufbjvkjvjbhjsk</p>
</body>
<div>
    Visual Studio 2022 for Mac 完全融入了 macOS 体验， 整个 IDE 均使用原生控件，具有全新的深色模式和原生 macOS 辅助功能工具。当我听说她被捕时，我感到很惊讶，因为我认为她是那种害怕自己影子的胆小鬼。
    jdhjnddgigfwjneufjnvjkjbnlblnbjbjbkjkhffufbjvkjv
</div>

32.2文本与段落的综合练习

<style>
    div{ width: 800px;}
     h1{ text-align: center;color: #ff6600;}
     h2{ color: #00a0ff;}
     #p1{ font-style: italic; font-weight: bold;}
     #p2{ color: #66ff00 ;line-height: 30px;text-indent: 2em;}
     #p3{ color: #00ffff; line-height: 30px; text-indent: 2em  ;text-decoration: underline;font-style: italic;}
     #p4{ font-weight: bold;letter-spacing: 10px;line-height: 30px;text-indent: 2em;}
     #p5{ color: #cc00cc;line: height 30px; text-indent: 2em;}
</style>
<body>
    <div>
        <h1>马思唯简介</h1>
        <h2>基本信息</h2>
        <p id="p1">马思唯，1993年1月27日出生于四川省成都市郫都区，中国内地说唱男歌手、说唱组合Higher成员。</p>
         <p id="p2">   2016年，加入说唱组合Higher Brothers。2017年，随组合签约美国Control Music Group，并发行组合首张音乐专辑《Black Cab》 。 2018年，随组合在美国举行巡回演唱会。2019年，随组合获得网易云音乐原创盛典“年度说唱音乐人奖”  。同年，发行组合第二张音乐专辑《Five Stars》。
            2020年，发行个人音乐专辑《黑马王子》。同年，获得第17届年度先生盛典“年度榜young奖”   。2021年，发行个人第二张音乐专辑《黑马》。

        </p>
        <h2>早年经历</h2>
        <p id="p3">小学二年级时，马思唯在听到周杰伦的歌曲《忍者》后被深深震撼，成为他对嘻哈音乐的最初印象。后来，在听到歌曲《双截棍》之后，开始对有说唱元素的音乐萌生出了兴趣。大学时，他结识了一帮同样热爱嘻哈音乐的朋友，并尝试录制了几首歌曲。期间，他还在幼儿早教中心、超市、成都7-11、装潢设计公司等地做兼职。22岁时，为了证明自己而选择离家出走，正式成为一名说唱歌手 </p>
        <h2>人物评价</h2> 
        <p id="p4">从音乐厂牌CDC到Worldwide，马思唯从21岁开始就不断在中文说唱圈留下印记  。他的身材精瘦，留着一头短短的脏辫，束成高高的马尾  。他的声音颇有质感，搭配前卫的曲风展现出旺盛的生命力  。出生并成长于成都郫县的身份，让他在轻松驾驭各式Old School、Trap、 Boombap等风格的同时，歌词表达里更多了一分“烟火气”   。</p>
        <p id="p5"> 作为中国内地说唱组合Higher Brothers的团队领袖，马思唯不仅会写歌、制作、混音、MV剪辑，还凭借《崂山道士》《姚明》等个人音乐作品受到说唱圈的认可  。他用独特的韵脚与风格突破传统桎梏，将中国制造的音乐和文化带向更大的舞台。他逐步成为了将中文说唱带向国际的代表人物之一，在中国当代嘻哈图景中留下了印迹。
            </p>
    </div>
</body>

三十三、CSS复合样式

  • 复合的写法：是通过空格的方式实现的，复合写法有的是不需要关心顺序，例如：background、border；有的需要关心顺序，例如：font。
  • 1.background：red url() repeat 0 0
  • 2.border:1px red solid
  • 3.font
  • 注：最少要有两个值 size family
    weight style size family
    style weight size family（后两个顺序不能换）
    weight style size/line- height family
    注：如果非要混合去写，那么要先写复合样式，再写单一样式，这样样式才不会覆盖掉。
 <style>
    div{ width: 800px;height: 700px;
    background: tomato url(./images.jpeg ) no-repeat center center;
    background-color: tomato;
    border-right: dashed 2px blue;
    font: italic 30px 宋体;
    }
</style>
<div>这是一段文字</div>

三十三、CSS选择器

33.1ID选择器

  • 样式：#elem{ } id=“elem”
    注：
    1.ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
    2.命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
    3.驼峰写法：searchButton （小驼峰） SearchButton （大驼峰) searchSmallButton
    短线写法： search-small-buttor
    下划线写法: search_small_ button
<style>
    #div1{ background-color: red; }
    #div2{ background-color: blue;}
</style>
<body>
    <div id="div1">这是一个块</div>
    <div id="div2">这又是一个块</div>
</body>

33.2class选择器

  • .elem{ } class=“elem”
    注：
  • 1.class选择器是可以复用的
  • 2.可以添加多个class样式
  • 3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性的顺序
  • 4.标签+类的写法
<style>
    p.box{ background: red;}
</style>
<div class="box">这是一个块</div>
<div class="box">这又是一个块</div>
<p class="box">这是一个段落</p>

33.3标签选择器（TAG选择器）

  • div {} <div></div>
    使用场景：
    1.去掉某些标签的默认样式
    2.复杂的选择器中如层次选择器

33.4群组选择器（分组选择器）

  • 可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用
<style>
   div, #text,.title{background: firebrick;}
</style>
  <div>这是一个块</div>
  <p id="text"> 这又是一个块</p>
  <h2 class="title">这是一个标题</h2>

33.5通配选择器

  • *{ } -> div,ul,li,p,h1,h2…{ }
    注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
    使用的场景：去掉所有默认样式时

33.6层次选择器

后代 M N { }
父子 M>N { }
兄弟 M～N { } 当前M下面的所有的兄弟N标签
相邻 M+N { } 当前M下面的相邻的N标签

<style>
    #list>li{ border: 1px red solid;}
  </style>
  <ul id="list">
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
    <li></li>
  </ul>
  <style>
    ol li { border: 1px red solid;}
  </style>
  <ol>
    <li></li>
    <li></li>
    <li></li>
  </ol>
<style>
    div~h2{background-color: aqua; }
</style>
  <div>这是一个块</div>
  <p > 这又是一个块</p>
  <h2 >这是一个标题</h2>

33.7 属性选择器

M[attr] { }

  • = :完全匹配

  • *=：部分匹配

  • ^=:起始匹配

  • $=:结束匹配

  • [ ][ ] [ ]:组合匹配

 <style>
    div[class=box]{ background: lightgreen;}
</style>
  

  <div>aaaaa</div>
  <div class="box">bbbbbb</div>
  <div class="search">ccccc</div>

33.8伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候 ，用伪类来添加。

  • M:伪类{ }

: link 访问前的样式 （只能添加给a标签）
：visited 访问后的样式 （只能添加给a标签）
：hover 鼠标移入时的样式 （可以添加给所有的标签）
：active 鼠标按下时的样式 （可以添加给所有的标签）
注：1.一般的网页都只设置 a{ } (link visited active) a:hover
  2.如果四个伪类都生效一定要注意顺序：LVHA.

<style>
    a:link{color: red;}
    a:visited{ color: blue;}
    a:hover{ color: green;}
    a:active{ color: yellow;}


</style>
<a href="#">这是一个链接</a>

1.：after 、:before 通过伪类的方式给元素添加一段内容，使用content属性
2.:checked 、:disabled 、：focus 都是针对表单元素

33.9结构性选择器

  • nth-of-type() nth-child()
    角标是从1开始的，1表示第一项，2表示第二项 ｜n值表示从零到无穷大
    first-of-type
    last-of-type
    only-of-type
  • nth-of-type()和nth-child()之间的区别
    type:类型
    child:孩子
<style>
   /* li:first-of-type{background: darkolivegreen; }
    li:last-of-type{ background: blue;}*/
    div:only-of-type{background: darkmagenta;}
    li:nth-child(3){background: cadetblue;}
    li:nth-of-type(2){ background: aqua;}
</style>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

三十四、CSS样式的继承

  • 文字相关的样式可以被继承
    布局相关的样式不能被继承（默认是不能被继承到，但是可以设置继承属性 inherit值)
<style>
div{ width: 300px;height: 300px;border: 1px red solid;color: red;font-size: 30px;}
    p{ border: inherit;}
</style>
<div>
<p>这是一个段落</p>
</div>

三十五、CSS优先级

  • 1.相同样式优先级
    当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
 <style>
    #elem{color: coral;}
    .box{ color: aquamarine;}
    div{color: blue;}
    *{color: crimson;}
    body{color: chartreuse;}
</style>
<div id="elem" class="box">这是一个块</div>
  • 2.内部样式与外部样式
    内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入样式优先级高。
  • 3.单一样式优先级
    style 行间 > id >class > tag > * > 继承
    注：style行间 权重 1000
    id 权重 100
    class 权重 10
    tag 权重 1
  • 4.！important
    提升样式优先级，非规范方式，不建议使用。(不能针对继承的优先级进行提升）
<style>
     #elem{color: coral;}
    *{ color: aqua !important;}
</style>
<div id="elem" style="color:blue ;"> 这是一个块</div>

5.标签+类与单类
标签+类 > 单类 优先级

  • 6.群组优先级
    群组选择器与单一选择器的优先级相同时，靠后写的优先级高。
  • 7.层次优先级
    （1）权重比较
    ul li .box p input{} 1+1+10+1+1
    .hello span #elem 10+1+100
    （2）约分比较
    ul li .box p input{} li p input{}
    .hello span #elem #elem

三十六、css盒子模型

  • 组成：content-> padding-> border-> margin
    物品 填充物 包装盒 盒子与盒子之间的间距
    content: 内容区域 width和height组成
    padding： 内边距（内填充）
    只写一个值：30px （上下、左右）
    写两个值： 30px 40px (上下、左右)
    写四个值： 30px 40px 50px 60px (上、右、下、左)
    单一样式只能写一个值：
    padding-left
    padding-right
    padding-top
    padding-bottom
  • margin :外边距（外填充）
    只写一个值：30px （上下、左右）
    写两个值： 30px 40px (上下、左右)
    写四个值： 30px 40px 50px 60px (上、右、下、左)
  • 单一样式只能写一个值：
    margin-left
    margin-right
    margin-top
    margin-bottom
  • 注：1.背景颜色会填充到margin以外的区域
    2.文字会在content区域
    3.padding不能出现负值，margin是可以出现负值的
<style>
    #box{ 
        width: 200px;height: 200px;background: brown;border: 10px blue solid;
        padding: 30px 50px;
        margin: 10px;
        }
    #box2{ width: 200px;height: 200px; background: darkgreen;color: blueviolet;}
</style>
<div id="box">这是一个盒子</div>
<div  id="box2">这又是一个盒子</div>

box-sizing
盒子尺寸，可以改变盒子模型的展示形态
默认值：content-box :width、height-> content
border-box :width、height->content padding border
使用场景：
1.不用再去计算一些值
2.解决一些100%问题

     <style>
    #box{ width: 200px;height: 200px;background: darkviolet;border: 10px blue solid;
    padding: 30px 50px;
    box-sizing: border-box;
    }
    input{ width: 100%;}
</style>
<div id="box">这是一个盒子</div>
<input type="text">

36.2CSS盒子模型的问题

1.margin叠加问题，当给两个盒子同时添加上下外边距的时候，就会出现叠加问题。这个问题只有在上下有，左右是没有这个叠加问题的。 出现在上下margin同时存在的时候，会取上下中值较大的作为叠加的值。
解决方案：
1.BFC规范
2.想办法只给一个元素添加间距
2.margin传递
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。
解决方案：
1.BFC规范
2.给父容器加边框
3.margin换成padding

     <style>
    #box1{ width: 200px;height: 200px;background: aqua;margin-bottom: 30px;}
    #box2{ width: 200px;height: 200px;background: chocolate;margin-top: 40px;}
</style>
<div id="box1"></div>
<div  id="box2"></div>

<style>
     #box{ width: 200px;height: 200px;background: aqua;border: 1px black solid;
    padding: 30px 50px;
     box-sizing: border-box;
    }
    input{width: 100%;padding: 30px;box-sizing: border-box;}
</style>
<div id="box">这是这个盒子</div>
<input type="text">
  • 扩展
    1.margin左右自适应是可以的，但是上下自适应是不行的。（如果想实现上下自适应的话，需要在第二大部分来学习）
    2.width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。
<style>
    #box1{width: 400px;height: 100px;background: crimson;}
    #box2{ height: 100px;background: dodgerblue;color: white;padding-left: 30px;border-left: 10px black solid;}

</style>
    <div id="box1">
    <div  id="box2">这是一些内容</div>
</div>
  • CSS模型的嵌套练习
 <style>
 #box1{width: 350px;height: 350px;border: 1px black dashed;padding: 27px;}
 #box2{border: 5px #d7effe solid; padding: 20px;}
 #box3{background: #ffa0df;padding: 41px;}
 #box4{background: 1px white dashed;padding: 3px;}
 #box5{border: 1px white dashed; padding: 49px;}
 #box6{width: 100px;height: 100px;background: #96ff38;border: #fcff00 5px solid;}
</style>
<div id="box1">
    <div id="box2">
        <div id="box3">
            <div id="box4">
                <div id="box5"></div>
                <div id="box6"></div>
            </div>
        </div>
    </div>
</div>

三十七、标签的分类

37.1按类型

block:div、p、ul、li、h1 …
1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的款相同
inline: span 、a、em、strong、img
1.挨在一起
2.有些样式不支持，例如：width、height、margin、padding
3.不写宽的时候，宽度由内容决定
4.所占的区域不一定是矩形

    <style>
    /*#box1,#box2{ width: 100px;height: 100px;background: red;}*/
    #content,#content{ width: 100px;height: 100px;background: red;}
</style>
<span id="content1">内联1内联1内联1内联1</span>>
<span id="content2">内联2</span>> 

5.内联标签之间会有空隙，原因：换行产生的

inline- block：input、select …
1.挨在一起，支持宽高

注：布局一般用块标签，修饰文本一般用内联标签

<style>
    input{width: 100px;height: 100px;}
</style>
<input type="text">
<input type="text">

37.2按内容

Flow:流内容
Metadate ：元数据
Sectioning ：分区
Heading ：标题
Phrasing ：措辞
Embedded ：嵌入的
Interactive ：互动的
（详情：添加链接描述 ）

37.3 按显示

替换元素 ：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
img、input …
非替换元素 ：将内容直接告诉浏览器，将其显示出来
div、h1 、p…

37.4显示框类型

display
block
inline
inline-block
none
注：display：none与visibility：hidden区别display：none不占空间的隐藏visibility：hidden占空间的隐藏

<style>
    div{ width: 100px;height: 100px;background: red;display: inline;}
    span{ width: 100px; height: 100px;background: red;display: block;}
</style>
<div>块1</div>
<div>块2</div>
<span>内联1</span>
<span>内联2</span>
<input type="text">
<style>
    #box1,#box2{width: 100px;height: 100px;background: red;}
    #box1{visibility: hidden;}
</style>
<div id="box1">块1</div>
<div id="box2">块1</div>

三十八、标签的嵌套规范

ul 、li
dl 、dt 、dd
table 、tr 、td、
块能够嵌套内联
块嵌套块

<div>
    <div></div>
 </div>

特殊：块不一定能嵌套块标签
     错误的写法：
     <p>
        <div></div>
     </p>

内联是不能嵌套块的
错误的写法：
<span>
    <div></div>
</span>
特殊：a标签是一个例外
正确的写法
<a href="#">
    <div></div>
</a>

三十九、溢出隐藏

overflow
visible:默认
hidden（溢出内容隐藏）
scroll(出现上下滚动条)
auto（只出现上滚动条）
x、y轴

<style>
    /*#box1,#box2{ width: 100px;height: 100px;background: red;}*/
    #content,#content{ width: 100px;height: 100px;background: red;}
</style>
<span id="content1">内联1内联1内联1内联1</span>>
<span id="content2">内联2</span>>
<style>
    div{ width: 300px;height: 200px;border: 1px black solid;overflow: hidden;}
    div{ width: 300px;height: 200px;border: 1px black solid;overflow:scroll}
    div{ width: 300px;height: 200px;border: 1px black solid;overflow: auto;}
    div{ width: 300px;height: 200px;border: 1px black solid;overflow-x: scroll;overflow-y: auto;}
</style>
<div>
    溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
    溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
    溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
    溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
    溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
    溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
    溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
    溢出隐藏 溢出隐藏 溢出隐藏
</div>

四十、透明度与手势

pacity :0(透明）~1（不透明）0.5半透明
注：占空间、所以的子内容也会透明
rgba（ ） ：0～1
注：可以指定的样式透明，而不影响其他样式
cursor：手势
default：默认箭头
要实现自定义手势：
准备图片： .cur 、.ico
cursor: url(./img/cursor.ico),auto;

<style>
    #div{ width: 100px; height: 100px; background: red;opacity: 0.5;}
    #div{ width: 100px; height: 100px; background: rgba(255, 0, 0, 0.5);
    cursor: url(./img/cursor.ico),auto;}
</style>
<div id="div1">这是一个块</div>
<p>这是一个段落</p>
<div id="div2">这又是一个块</div>

四十一、最大、最小宽高

min-width、max-width
min-height、max-height 
注：强化对百分比的理解 %换算：以父容器的大小进行换算的
一个容器怎么适应屏幕的高：容器加height:100%;body:100%;html:100%
html,body{height:100%;}
.contrainer{height:100%}
<style>
  body{height: 500px;}
  #box1{ width: 200px;height: 100%;background: red;}
  #box2{width: 100%;height: 80%;background: blue;}
</style>
<div>
    这是一段内容
    这是一段内容
    这是一段内容
    这是一段内容
    <div id="box1">这是一个块</div>
    <div id="box2">这是一个块</div>
</div>

四十二、css默认样式

没有默认样式的：div 、span
有默认样式：
body -> margin -> 8px
h1 -> margin : 上下 21.440px
font-weight :bold
p -> margin :上下 16px padding :左 40px
默认点：list-style :underline
a-> text-decoration :underline;
6.css reset
*{ margin:0;padding:0;}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能
body，p,h1,ul{ margin:0;padding:0;}
ul{ list-style : none；}
a{ text-decoration: none; color:#999}
img{ display:block}
问题的现象：图片跟容器的底部有一些空隙
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical- align：baseline；基线对齐方式，默认值
img{vertical-align:bottom; }解决方式是推荐的
写具体页面的时候或一个不具效果的时候：
1.写结构
2.css重置样式
3.写具体样式

<style>
    ul{ list-style: none;}
    a{ text-decoration: none;color: #ccc;}
</style>
<div>这是一个块</div>
<span></span>
<h1></h1>
<p></p>
<ul>
    <li></li>
</ul>
<a href="#">这是一个链接</a>
<style>
    div{ border: 1px black solid; }
    img{display: block;}
</style>
<div>
    <img src="./images.jpeg" alt="">
</div>

四十三、float浮动

1.文档流
文档流是文档中可显示对象在排列时所占用的位置
2.float特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
float取值：left、right、none（默认）

<style>
    body{ border: 1px black solid;}
    #box1{ width: 100px;height: 100px;background: yellow;float: right;}
    #box2{ width: 200px;height: 200px;background: red;float: right;}
</style>
<div id="box1"></div>
<div id="box2"></div>

3.注意点
只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给块元素添加，但也可以给内联元素添加

 <style>
    body{ border: 1px black solid;}
    #box1{ width: 100px;height: 100px;background: yellow;}
    #box2{ width: 200px;height: 200px;background: red;float: left;}
    #box3{ width: 300px;height: 300px;background: blue;}
    #box4{ background: green;float: left;}
</style>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3">文字文字文字</div>
<div id="box4" >这是一个没有宽高的块元素</div>

<style>
    ul{ margin: 0;padding: 0;list-style: none;width: 300px;height: 300px; border: 1px black solid; }
    li{ width: 100px;height: 100px;background: red;border: 1px yellow solid;box-sizing: border-box;
    float: left;}
    li:nth-of-type(1){ height: 120px;}
    li:nth-of-type(2){ height: 80px;}
    
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<span>aaaaa</span><span>bbbb</span>

4.如何清除浮动
上下排列：clear 属性，表示清除浮动的，left、right、both
嵌套排列：
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响。
display：inline- block（BFC规范），不推荐，父容器会影响到后面的元素。
设置空标签：不推荐，会多添加一个标签。
after标签：推荐，是空标签的加强版，目前各大公司的做法
(clear属性只会操作块标签，对内联标签不起作用)

<style>
    #box1{ width: 200px;border: 1px black solid;}
    #box2{ width: 100px; height: 200px; background: red;float: left;}
    .clear:after{ content: '';clear: both;display: block;}
</style>
<div id="box1">
<div id="box2"></div>
<div class="clear">这是一个空标签</div>
</div>
aaaaa

四十四、CSC位置

  • position :
    stastic(默认)
    relative
    absolute
    fixed
    sticky
  • 1.relative :
    如果没有定位偏移量，对元素本身没有任何影响
    不使元素脱离文档流
    不影响其他元素布局
    left、top、right、bottom是相对元素自身运行偏移
  • 2.absolute
    使元素完全脱离文档流
    使内联元素支持宽高（让内联具备块的特性）
    使块元素默认宽根据内容决定（让块具备内联的特性）
    如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对，相对，固定）
<div id="box1"></div>
<div id="box2"></div>
<style>
    span{width: 100px;height: 100px;background: red;position: absolute;}
    div{ background: red;position: absolute;left: 100px;top}
</style>
<style>
    #box1{width: 300px;height: 300px;border: 1px  black solid; margin: 200px;position:relative;}
    #box2{ width: 100px;height: 100px; background: red;position: absolute;right: 0;bottom: 0;}
</style>
<div id="box1"></div>
<div id="box2"></div>
  • 3.fixed固定定位
    使元素完全脱离文档流
    使内联元素支持宽高（让内联具备块的特性）
    使块元素默认宽根据内容决定（让块具备内联的特性）
    相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
<style>
    body { height: 2000px;}
    div  { position: fixed;bottom: 0; right: 0;}
</style>
<div>这是一个块</div>
  • sticky粘性定位
    在指定的位置，进行粘性操作。
<style>
    body{height: 2000px;}
    div{ background: red;position: sticky;top: 0;}
</style>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<div>这是一个块</div>
<p>bbbbbbb</p>
<p>bbbbbbb</p>
  • z-index定位层级
<style>
    #parent{ width: 100px;width: 100px;border: 1px black solid;position: absolute;z-index: -2;}
    #box1{ width: 100px;height: 100px;background: red;position: absolute;z-index: 0;}
    #box2{ width: 100px; height: 100px;background: blue;position: absolute;left: 50px;top: 50px;z-index: -1;}
</style>
<div id="parent"></div>
<div id="box1"></div>
<div id="box2"></div>

四十五、CSS精灵

特性：css雪碧又叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载
好处：
可以减少图片的质量，网页的图片加载速度快
减少图片的请求次数，加快网页的打开

<style>
        #box1{ width: 20px;height: 21px;background: url(./sprite_icon.png ) no-repeat left --596px;}
        #box2{ width: 300px;height: 50px;border: 1px black solid;line-height: 50px;padding-left: 30px;
        background: url(./sprite_icon.png) no-repeat right ;}
    </style>
    <body>
        <div id="box1"></div>
        <div id="box2">产品中心</div>
    </body>

四十六、css圆角

<style>
    #box1{ width: 200px;height: 200px;background: red ; border-radius: 100px;}
    #box2{ width: 300px;height: 300px;background: red;border-radius: 10px 20px 30px 40px;}
    #box3{ width: 300px;height: 150px;background: red;border-radius: 150px 150px 0 0;}
</style>
<div id="box1"></div>
<div  id="box2"></div>
<div  id="box3"></div>

四十七、pc端的布局

  通栏：自适应浏览器的宽度
  版心：固定一个宽度，并且让容器居中
  common.css

      *{ margin: 0;padding: 0;}
ul,ol{ list-style: none;}
img{ display: block;}
a{ text-decoration: none;color: #646464;}
h1,h2,h3{ font-size: 16px;}
body{ font-family: Arial;}

.l{ float: left;}
.r{ float: right;}
.clear:after{ content: "";display: block;clear: both;}
.container{width: 1080px;margin: 0 auto;position: relative;}
.container-fluid{ width: 100%;}

#head{height: 81px;}
#head .head_logo{ width: 164px;height: 44px;margin-top: 19px;float: left;}
#head .head_menu{font-size: 14px;line-height: 81px;}
#head .head_menu li{ float: left;margin-left: 58px;}

#foot{ background: #66c5b4;}
#foot .container{height: 54px;line-height: 54px;font-size: 12px;color: white;}
#foot div a{color: white;margin: 0 10px;}

#area_title{margin-top: 60px;min-height: 407px;text-align: center;}
#area_title h2{ height: 20px; line-height: 20px;font-size: 20px;color: #363636;background: url(../images/title_bg.png);}
#area_title  p{color: #9f9f9f;font-size: 14px;line-height: 34px;float: center;}
Document 
 #service{ overflow: hidden;min-height: 407px ;}
    #service .service_list{ text-align: center; margin-top: -350px;}
    #service .service_list li{ float: left;width: 250px;margin: 0 10px;}
    #service .service_list div{ width: 102px;height: 102px;margin: 0 auto;} 
    #service .service_list li:nth-of-type(1) div{ background-image: url(./images/web1.png);}
    #service .service_list li:nth-of-type(2) div{ background-image: url(./images/mail1.png);}
    #service .service_list li:nth-of-type(3) div{ background-image: url(./images/graphic1.png);}
    #service .service_list li:nth-of-type(4) div{ background-image: url(./images/e-bussiness1.png);}
    #service .service_list h3{ font-size: 18px;color: #434343; line-height: 36px;margin-top: 25px;}
    #service .service_list p{ font-size: 14px; color: #6d6d6d; line-height: 22px;}

    #case{background: #f8f8f8;}
    #case .container{ min-height: 460px; overflow: hidden;}
    #case .area_title{margin-top: 55px;}
    #case .area_title h2{ color: #66c5b4;}
    #case .case_list{margin-top: 28px ;}
    #case .case_list li{float: left;width: 340px;margin: 0 10px;}
    #case .case_btn{width: 176px;height: 37px;background: #66c5b4;margin: 0 auto;border-radius: 25px
        ; line-height: 37px;text-align: center;color: white;font-size: 14px;margin-top: 36px;}
    #case .case_btn a{display: block;width: 100%;height: 100%;color: white;}

    #news{ min-height: 450px;overflow: hidden;}
    #news .area_title{ margin-top: 65px;}
    #news dl{ margin-top: 48px;}
    #news dt{ width: 234px;}
    #news dd{ width: 846px;}
    #news .news_list{ width: 100%;}
    #news .news_list li{ width: 50%;float: left;margin-bottom: 48px; }
    #news .news_date{ width: 71px;height: 70px; border-right: 1px solid #dcdcdc; }
    #news .news_date i{ color: #66c5b4;font-size: 39px; display: block;}
    #news .news_date span{ color: #999999;font-size: 20px;line-height: 36px;font-weight: bolder;}
    #news .news_text{width: 310px;margin-left: 20px; }
    #news .news_text h3{ font-size: 14px;}
    #news .news_text h3 a{ color: #3f3f3f;}
    #news .news_text p{color: #a4a4a4;font-size: 12px;line-height: 21px;margin-top: 17px;}

   
   </style>
<body>
    

    
    


<div id="head" class="container">
<div class="head_logo 1">
    <a href="#">
        <img src="./images/logo.png" alt="博文尚美" title="博文尚美">
     </a>
    </div>
    <ul class="head_menu r">
        <li>
            <a href="#">HOME</a>
        </li>
        <li>
            <a href="#">ABOUT</a>
        </li>
        <li>
            <a href="#">PROTFOLILO</a>
        </li>
        <li>
            <a href="#">SERVICE</a>
        </li>
        <li>
            <a href="#">NEWS</a>
        </li>
        <li>
            <a href="#">CONTACT</a>
        </li>

    </ul>


</div>
    <div id="banner" class="contaner-fluid">
    
   <ul class="banner_list" >
    <li  class="active" style="background-image:url(./images/banner.png)">
        <a href="#"></a>
    </li>
    <li style="background-image:url(./images/banner.png) ">
        <a href="#"></a>
    </li>
    <li style="background-image:url(./images/banner.png) ">
        <a href="#"></a>
    </li>
    <li style="background-image:url(./images/banner.png) ">
        <a href="#"></a>
    </li>
   </ul>
   <ol class="banner_btn">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
   </ol>
    </div>
    <div id="service" class="container">
       <div class="area_title">
        <h2>服务范围</h2>
        <p>OUR SERVICE </p>
       </div>
    </div> 
           <ul class="serve_list">
        <li>
            <div>
                <a href="">
                    <img src="./images/web1.png" alt="">
                </a>
            </div>
            <h3>1.web design</h3>
            <p>
                企业品牌网页设计/手机网站制作
                <br>
                动画网站创意制作
            </p>
        </li>
        <li>
            <div>
                <a href="">
                <img src="./images/graphic1.png" alt="">
                </a>
            </div>
            <h3>2.graphic design</h3>
            <p>
               标志logo设计/产品宣传册设计
                <br>
                动画网站创意制作
            </p>
        </li>
        <li>
            <div>
                <a href="">
                    <img src="./images/e-bussiness1.png" alt="">
                </a>
            </div>
            <h3>3.e-business plan</h3>
            <p>
                淘宝/天猫装修设计及运营推广
                <br>
                企业微信、微信营销
            </p>
        </li>
        <li>
            <div>
                <a href="">
                    <img src="./images/mail1.png" alt="">
                </a>
            </div>
            <h3>4.mailboxagents</h3>
            <p>
                腾讯/网易企业邮箱品牌代理
                <br>
                个性化邮箱定制开发
            </p>
        </li>
    </ul>
    <div id="case" class="container-fluid">
        <div class="container">
        <div class="area_title">
            <h2>{ 客户案例 }</h2><img src="./images/title_bg.png" alt="">
            <p>with the best professional technology,to design the best innovative web site </p>
            
            
        </div>
        <ul class="case_list clear">
            <li>
                <a href="#"><img src="./images/20141121095216750.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/20141121095528549.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/20141121105856226.png" alt=""></a>
            </li>
        </ul>
        <div class="case_btn">
            <a href="#">VIEW MORE</a>
        </div>
        </div>
    </div> 
     <div id="news" class="container">
        <div class="area_title">
            <h2>最新资讯</h2>
            <p>THE LATES NEWS</p>
        </div>
        <dt>
            <img src="./images/xs1.png" alt="">
        </dt>
        <dd class="1">
            <ul class="news_list">
                <li>
                    <div class="news_date 1">
                    <i>09</i>
                    <span>Jan</span>
                    </div>
                    <div class="news_text 1">
                        <h3><a href="#">网站排名进入进入前三的技巧说明</a></h3>
                        <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                            首页，更不用说进首页前三了。那么网站优...</p>

                    </div>  
                </li>
                <li>
                    <div class="news_date 1">
                    <i>09</i>
                    <span>Jan</span>
                    </div>
                    <div class="news_text 1">
                        <h3><a href="#">网站排名进入进入前三的技巧说明</a></h3>
                        <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                            首页，更不用说进首页前三了。那么网站优...</p>

                    </div>  
                </li>
                <li>
                    <div class="news_date 1">
                    <i>09</i>
                    <span>Jan</span>
                    </div>
                    <div class="news_text 1">
                        <h3><a href="#">网站排名进入进入前三的技巧说明</a></h3>
                        <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                            首页，更不用说进首页前三了。那么网站优...</p>

                    </div>  
                </li>
                <li>
                    <div class="news_date 1">
                    <i>09</i>
                    <span>Jan</span>
                    </div>
                    <div class="news_text 1">
                        <h3><a href="#">网站排名进入进入前三的技巧说明</a></h3>
                        <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                            首页，更不用说进首页前三了。那么网站优...</p>

                    </div>  
                </li>




            </ul>
        </dd>

     </div>
     <div id="foot" class="container-fluid">
        <div class="container">
            <p class="1">Copyright 2006-2014 Bowenshangmei Culture A11 Rights Reserved</p>
            <div class="r">
              <a href="#">HOME</a> ｜<a href="#"> ABOUT</a> | <a href="#">Portfolio</a> <a href="#"> Contact</a> 
            </div>

        </div>

     </div>
</body>
</html>




PC端游戏网页

*{ margin: 0;padding: 0;}
ul,ol{ list-style: none;}
img{display: block;}
a{ text-decoration: none; color: #464646;}
h1,h2,h3{ font-size: 16px;}
body{ font-family: Arial,'宋体';}

.l{ float: left;}
.r{ float: right;}
.clear:after{content: "";display: block;clear: both;}
.container{width: 980px;margin: 0 auto;position: relative;}
.container-fluid{ width: 100%;}

#head{ background-color: aliceblue;} 
#head .container{height: 41px; }
#head .head_logo{float: left;  ;width: 220px;height: 41px;background: url(../未命名文件夹/qq飞车/图片/cf1136d4e1cad7caa9a5353815929c6a.jpg) no-repeat 0  -38px;}
#head .head_logo a{display: block;width: 100%; height: 100%;text-indent: -9999px;overflow: hidden;}
#head .head_ad { margin-left: 8px;float: right;}
#head .head_menu{font-size: 12px;}
#head .head_menu div{ height: 18px;margin-top: 13px;background: url() no-repeat;}
#head .head_menu_czsh{ margin-right: 30px;padding-left: 20px;background-position: left --92px;}
#head .head_menu_top{ padding-right: 20px;background-position: right -89px;}

<!DOCTYPE html>   
<html lang="en">
   <head>
      <meta charest="UTF-8">
      <meta name="Viewport" content="width=device-width,initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">  
      <title>Document</title>  
      <link  rel="stylesheet"  href="./common.css">
      <style>
      #main{ background: url(./qq飞车/图片/cf1136d4e1cad7caa9a5353815929c6a.jpg) no-repeat center 0;}
      #nav{ height: 236px;background: url() repeat-x,url() no-repeat center 0;overflow: hidden;position: relative;}
      #nav .nav_logo{width: 138px;height: 112px;margin: 15px auto;}
      #nav dl{position: absolute;top: 0;}
      #nav dt{ height: 66px;}
      #nav dt a{ width: 100%;height: 100%;display: block;text-indent: -9999px;overflow: hidden;}
      #nav dd{ line-height: 27px;font-size: 12px;text-align: center;}
      #nav dd a{color: white; }
      #nav dd a:hover{ color: red;text-decoration: underline;}
      #nav dd a.hot:after{content: "";display: block;width: 12px;height: 12px;background: url() no-repeat 0 -12px;position: absolute;right: -15px;top: 0;}
      #nav dd a.new:after{content: "";display: block;width: 12px;height: 12px;background: url() no-repeat 0 0;position: absolute;right: -15px;top: 0;}
      #nav .nav_index{ width: 65px;left: 0;}
      #nav .nav_z1{width: 69px;left: 98px;}
      #nav .nav_ss{ width: 74px;left: 203px;}
      #nav .nav_hd{width: 68px; left: 325px;}

        #link{height: 175px;}
        #link a{width: 463px; height: 100%;display: block;margin: 0 auto;}

        #banner{height: 276px;background: url() no-repeat;margin-top: 20px;}
        #banner .banner_left{width: 240px;height: 310px;background: url() no-repeat;margin: -20px 0 0 7px;}
        #banner .banner_download p{width: 91px;height: 25px;background: url() no-repeat;margin: 0 auto;text-indent: -9999px;overflow: hidden;}
        #banner .banner_download p:first-child{background-position: -253px 0;margin-top: 44px;}
        #banner .banner_download p:last-child{background-position: -253px -25px;}



        #banner .banner_download:hover p:first-child{animation: 1s upMove;}
        @keyframes upMove{
            0%{transform: translateY(-40px);opacity: 0;}
            100%{transform: translateY(0);opacity: 1;}
        }
        #banner .banner_download:hover p:last-child{animation: 1s downMove;}
        @keyframes downMove{
            0%{transform: translateY(40px);opacity: 0;}
            100%{transform: translateY(0);opacity: 1;}
        }
  
        #banner .banner_user div{width:56px;height:56px;border-radius: 50%;margin: 80px auto 0 auto;border: 4px #283257 solid;overflow: hidden;}
        #banner .banner_user img{width: 100%;height: 100%;}
        #banner .banner_user p{text-align: center;font-size: 12px;color: white;margin-top: 25px;}
        #banner .banner_user a{color: #34f1d0;}

        #banner .banner_list{width: 497px;height: 253px;overflow: hidden;margin: 13px 0 0 4px;position: relative;}
        #banner .banner_list_ul{width: 2000px;}
        #banner .banner_list_ul li{width: 497px;height: 253px;float: left;}
        #banner .banner_bottomline{width:100%;height: 37px;background: rgba(0,0,0,.5);border-top: 1px #514b55 solid;position: absolute;bottom: 0;left: 0;}
        #banner .banner_bottomline_ul{text-align: center;margin-top: 11px;}
        #banner .banner_bottomline_ul li{display: inline-block;width: 15px;height: 15px;background: url() no-repeat -603px -299px;cursor: pointer;}
        #banner .banner_bottomline_ul li.active{background-position: -581px -299px;}
        #banner .banner_bottomline_leftbtn{width: 12px;height: 22px;position: absolute;left: 5px;top: 5px;background: url() no-repeat -554px -296px;cursor: pointer;}
        #banner .banner_bottomline_rightbtn{width: 12px;height: 22px;position: absolute;right: 5px;top: 5px;background: url() no-repeat -554px -296px;cursor: pointer;}
        #banner .banner_bottomline_leftbtn:hover{background-position: -542px -325px;}
        #banner .banner_bottomline_rightbtn:hover{background-position: -554px -325px;}
        #banner .banner_list_lt{left: -2px;top: -4px;background-position: -621px -299px;}
        #banner .banner_list_rt{right: -2px;top: -4px;background-position: -634px -299px;}
        #banner .banner_list_rb{right: -2px;top: -5px;background-position: -634px -312px;}
        #banner .banner_list_lb{left: -2px;top: -4px;background-position: -621px -312px;}
        
        #banner .banner_right{width: 209px;height: 255px;position: relative;margin: 12px 0 0 12px;}
        #banner .banner_right_lt,#banner .banner_right_rt,#banner .banner_right_rb,#banner .banner_right_lb{width: 15px;height: 15px;background: url() no-repeat;position: absolute;}
        #banner .banner_right_lt{left:-4px;top: -4px;background-position: -681px -298px;}
        #banner .banner_right_rt{right:-4px;top: -4px;background-position: -696313px -298px;}
        #banner .banner_right_rb{right:-4px;bottom: -6696313px;background-position: -696313px -313px;}
        #banner .banner_right_lb{left:-4px;bottom: -6696313px;background-position: -681px -313px}

      </style>
   </head>
   <body>
    <div id="head" class="container-fluld">
        <div class="container">
            <div class="head_logo1">
                <a href="# ">腾讯游戏</a>
            </div>
            <div class="head_ad 1"></div>
            <a href="#"><img src="./qq飞车/图片/cf1136d4e1cad7caa9a5353815929c6a.jpg" alt="" height="30px" width="300px">
                
            </a>
            <div class="head_menu r">
                <div class="head_menu_czsh">
                    <a href="#">成长守护平台</a>

                </div>
            <div class="head_menu_top 1">
                <a href="#">腾讯游戏排行榜</a>

            </div>
        </div>
    </div>
</div>
    <div id="main" class="container-fluid"> 
        <div id=" nav" class="container-fluid">
            <div class="container">
            <div class="nav_logo">
                <a href="#">
                <img src="" alt="QQ飞车" title=" QQ飞车">
                </a>
            </div>
            <dl class="nav_index">
                <dt>
                 <a href="#">首页</a>
                </dt>
            </dl>
            <dl class="nav_z1">
                <dt>
                    <a href="#">新手指南</a>
                    <a href="#">新手指南</a>
                    <a href="#">新手指南</a>
                    <a href="#">新手指南</a>
                    <a href="#">新手指南</a>
                </dt>

            </dl>
            <dl class="nav_ss">
                <dt>
                    <dd><a href="#">新手指南</a></dd>
                    <dd><a href="#">新手指南</a></dd>
                    <dd> <a href="#">新手指南</a></dd>
                    <dd> <a href="#">新手指南</a></dd>
                    <dd></dd><a href="#">新手指南</a></dd>
                </dt>

            </dl>
            <dl class="nav_hd">
                <dt>
                    <dd><a href="#">新手指南</a></dd>
                    <dd><a class="hot"    href="#">新手指南</a></dd>
                        <dd> <a class="new" href="#">新手指南</a></dd>
                            <dd> <a href="#">新手指南</a></dd>
                                <dd> <a href="#">新手指南</a></dd>
                </dt>

            </dl>
            <dl class="nav_zx">
                <dt>
                   <dd> <a href="#">新手指南</a></dd>
                 <dd>  <a href="#">新手指南</a></dd>
                 <dd> <a href="#">新手指南</a></dd>
                 <dd><a href="#">新手指南</a></dd>
                 <dd><a href="#">新手指南</a></dd>
                </dt>

            </dl>

        <div></div>
        </div>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </div>
    <div id="link" class="container">
        <a href="#"></a>
    </div>
    <div id="banner" class="container">
        <div class="banner_left l">
            <div class="banner_download">
                <p>下载游戏</p>
                <p>DOWNLOAD</p>
            </div>
            <div class="banner_user">
                <div>
                    <img src="./images" alt="">
                </div>
                <p>欢迎<a href="#"登录></a>进入飞车世界</p>
            </div>
        </div>
        <div class="banner_center l">
            <div class="banner_list">
                <ul class="banner_list_ul">
                    <li>
                        <a href="#"><img src="." alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="." alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="." alt=""></a>
                    </li>
                </ul>
                <div class="banner_bottomline">
                    <ul class="banner_bottomline_ul">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="banner_bottomline_leftbtn"></div>
                    <div class="banner_bottomline_rightbtn"></div>
                </div>
                <i class="banner_list_lt"></i>
                <i class="banner_list_rt"></i>
                <i class="banner_list_rb"></i>
                <i class="banner_list_lb"></i>
            </div>
        </div>
        <div class="banner_right l">
            <a href="#"><img src="./images" alt=""></a>
            <i class="banner_right_lt"></i>
            <i class="banner_right_rt"></i>
            <i class="banner_right_rb"></i>
            <i class="banner_right_lb"></i>
        </div>
    </div>
————————————————


   </body>
</html>

更多推荐

Web前端从入门到入土

本文发布于:2023-04-29 21:09:00，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/525ceec7dde1c989bea983d6f07024f2.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：入门   Web

相关文章

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

  • 112259文章数
  • 28552阅读数
  • 0评论数

热门文章

标签列表