前端学习笔记1

落日映苍穹つ 2022-06-13 23:52 225阅读 0赞

# CSS 层叠样式表 实现内容和表现分离 #

CSS:  
1. 实现内容和表现分离  
2. CSS的样式控制比HTML的属性多  
3. CSS文件可以缓存在浏览器中，节省带宽。  
4. HTML和CSS内容和表现分离。SEO友好

## 三种使用方式： ##

1．内联： style:  
2．嵌入：

1.  外联样式：

## CSS选择器： ##

CSS2： id选择器  
类选择器  
普通选择器  
后代选择器 p em  
群组选择器 ，分隔  
伪类选择器：超链接，按钮，div  
:hover: 光标悬停  
:active: 光标点下去  
伪元素选择器(CSS3使用::前缀)：  
: first-letter

## 选择器的优先级： ##

1.内联> 嵌入 > 外联

2.定位范围越小的优先级越高 Id> 类>普通

3.优先级最高 !important

## Div盒子模型： ##

Margin: 90px //4个外边距都是90  
Margin: 90px 90px 90px 90px //上 右 下 左  
Margin: 90px 90px 90px 上 左右 下  
Margin: 90px 90px 上下 左右  
Margin: 90px auto; 水平方向居中

## Div布局： ##

Div: position样式：

Fixed: 相对于浏览器本身  
Relative: 相对div在文档中原有的位置  
Absolute: 相对父元素定位， 父元素必须是relative或者absolute, 如果所有父级元素都不是relative或者是absolute， 只能相对浏览器窗口定位

Div: 浮动

问题： 如果一个元素，其子元素都浮动了，这个元素就没有了高度。

解决方案：  
1.给父元素制定高度  
2.在父元素中添加额外的div, 设置样式Clear:both  
3.使用CSS3的伪对象，

## 行级元素 VS 块级元素 ##

行级元素：

块级元素： div p ul li  
**行内元素与块级函数的三个区别**  
1.行内元素与块级元素直观上的区别

行内元素会在一条直线上排列，都是同一行的，水平方向排列
    块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上  
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

行内元素和块级元素之间可以互转：

Display: inline(行级) 不可以设置宽高属性  
Block(块级)  
Inline-block: 行级元素，但是具有块级元素的宽高属性

注意： 块级元素变inline-block，vertical-align:top解决对齐问题。

**颜色代码**： red, rgb, rgba, \#xxxxxx \#eeeeee

# 阶段练习1 模仿QQmusic主页： #

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <link rel="stylesheet" href="css/common.css" />
            <link rel="stylesheet" href="css/normalize.css" />
        </head>
        <body>
    
            <div id="header">
                <img src="img/QQ音乐图标.png" />
                <div id="header_menu">
                    <img src="img/MV.png" />
                    <img src="img/电台.png" />
                    <img src="img/歌单.png" />
                    <img src="img/排行.png" />                
                </div>
    
            </div>
            <div id="content">
                <a href="1.html" target="_blank">
                    <img src="img/1.png" />
                </a>
                <a href="2.html">
                    <img src="img/2.png" />
                </a>
                <a href="">
                    <img src="img/3.png" />
                </a>
                <a href="">
                    <img src="img/4.png" />
                </a>
                <a href="">
                    <img src="img/5.png" />
                </a>
                <a href="">
                    <img src="img/6.png" />
                </a>
                <a href="">
                    <img src="img/7.png" />
                </a>
                <a href="">
                    <img src="img/8.png" />
                </a>    
            </div>
    
        </body>
    </html>
    
    
    common.css
    html,body
    {   
        /*margin: 0px;
        padding:0px;*/
        height: 100%;
    }
    
    body
    {
        min-width: 850px;
        background-image: url("../img/背景.png");
        background-size: cover;
        background-position: center;    
    }
    
    #header
    {
    
        height: 70px;
        background-image: url(../img/导航栏.png);
    }
    
    #header_menu
    {
        height: 70px;
        float: right;
    }
    
    #content
    {
        width:850px;
        /*margin-top: 100px;
        margin-left: 100px;*/
        margin: 90px auto;
    }
    
    #content img
    {
        width:200px;
        height: 200px;
    }

## CSS3选择器： ##

div>p  子元素
       div+* 紧挨着div后面的元素（1个）
        div~* 紧挨着div后面的元素（多个）

属性选择器：  
\[target\*=flower\] target=”xxxxflower” target=”xxxx flower”  
\[target~=flower\] target=”xxx flower”  
\[target^=flower\] target=”flowerxxxx”  
\[target|=flower\] target=”flower-xxxx”  
\[target$=flower\] target=”xxxtarget”;  
P:first-of-type 和P:first-child 的区别

如下案例：  
P:first-of-type：

这是第二个段落。

P:first-child： 选不到元素

<div>
    <span>这是第一个段落。</span>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>
    <p>这是第四个段落。</p>
    </div>

p:empty 开头和结尾标记紧挨着，重点不能有内容，空格，换行

:target

<!DOCTYPE html>
    <html>
    <head>
    <style> #news1:target { border: 2px solid #D4D4D4; background-color: #e5eecc; } #news2:target { border: 2px solid #D4D4D4; background-color: #eee; } </style>
    </head>
    <body>
    
    <h1>这是标题</h1>
    
    <p><a href="#news1">跳转至内容 1</a></p>
    <p><a href="#news2">跳转至内容 2</a></p>
    
    <p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>
    
    <p id="news1"><b>内容 1...</b></p>
    <p id="news2"><b>内容 2...</b></p>
    
    <p><b>注释：</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>
    
    </body>
    </html>

阶段练习2 一个无序列表控制内容显示：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <link rel="stylesheet" href="css/normalize.css" />
            <style> #mydiv { width: 420px; height: 200px; position:relative; } #mydiv>ul>li { display: inline-block; background-color: #0088CE; height: 40px; /*vertical-align: top; */ line-height: 40px; padding: 0px 5px; margin-right: -5px; } .contentdiv { width: 420px; height: 150px; position:absolute; left: 0px; bottom: 0px; background-color: white; } .contentdiv img { margin-top: 20px; } .contentdiv div { width:300px; float: right; } :target { z-index: 1; } /* #mydiv>ul>li:nth-of-type(2),#mydiv>ul>li:nth-of-type(5) { line-height: 30px; }*/ </style>
        </head>
        <body>
            <div id="mydiv">
                <ul>
                    <li>
                        <a href="#div1">医疗</a>
                    </li>
                    <li>
                        <a href="#div2">SaCa<sup>®</sup>云应用平台</a>
                    </li>
                    <li>
                        <a href="#div3">e-HR</a>
                    </li>
                    <li>
                        <a href="#div4">网络安全</a>
                    </li>
                    <li>
                        <a href="#div5">UniEAP<sup>®</sup></a>
                    </li>
                </ul>
    
    
                <div class="contentdiv" id="div2">
                    <img src="http://www.neusoft.com/cn/upload/images/20130514/1368513493641.jpg" />
                    <div>
                        <p>SaCa®云应用平台旨在支撑从端到云的统一构建快速而安全的应用，它提供了一系列产品来应对B2B2C/G2B2C模式下移动互联网、物联网、社交网络、情景感知、大数据、云计算的需求。</p>
                        <a href="#">更多>></a>
                    </div>
                </div>
                <div class="contentdiv" id="div3">
                    <img src="http://www.neusoft.com/upload/images/20110328/1301289141063.jpg" />
                    <div>
                        <p>东软慧鼎人才资本管理系统（TalentBase HCM)是东软与怡安翰威特咨询公司强强联手、共同推出的可提供最佳人才资本管理实践方法、软件和服务的人才资本管理产品。</p>
                        <a href="#">更多>></a>
                    </div>
                </div>
                <div class="contentdiv" id="div4">
                    <img src="http://www.neusoft.com/upload/images/20110328/1301289122388.jpg" />
                    <div>
                        <p>东软NetEye信息安全为您提供高品质的信息安全产品和专业化的信息安全服务，及面向用户应用的网络安全整体解决方案。</p>
                        <a href="#">更多>></a>
                    </div>
                </div>
                <div class="contentdiv" id="div5">
                    <img src="http://www.neusoft.com/upload/images/20110328/1301289180176.jpg" />
                    <div>
                        <p>UniEAP®包含由开发工具、技术框架、通用技术组件和软件开发方法学，提供从需求、设计、开发、调试、部署到运维的应用全生命周期一站式服务，支撑IT应用的敏捷构建。</p>
                        <a href="#">更多>></a>
                    </div>
                </div>
                <div class="contentdiv" id="div1">
                    <img src="http://www.neusoft.com/upload/images/20110411/1302490892347.jpg" />
                    <div>
                        <p>东软提供从硬件到软件、从技术到服务、从医院到个人、从中心城市到偏远地区的全面医疗健康保障解决方案，涵盖医学影像设备、数字化医院解决方案、区域医疗、个人健康服务等多个领域。</p>
                        <a href="#">更多>></a>
                    </div>
                </div>
    
            </div>
        </body>
    </html>