HTML & CSS 学习笔记

0， 准备

学习网站推荐：

W3school (W3C中国社区成员建的非盈利网站)（学HTMl+CSS+JS比w3cschool.cn好）

http://www.w3school.com.cn/

MDN火狐浏览器给开发者的在线学习：

https://developer.mozilla.org/zh-CN/docs/Web

 

VSCode插件推荐：

Live Server 保存即自动刷新，实时预览HTML效果（原理：创建了本地服务器，端口5500，并在网页里附加实现同步刷新功能的js (WebSock协议)）

 

1， 关于路径（和Linux一样）

/　　  根目录      (注：VSCode的Live Server根目录是项目目录，而HBuilder X是项目目录的上一层)

./　　 当前目录  (注：abc/css 等同于 ./abc/css )

../　　上一级目录

 

2， CSS边框系 ~~~ Padding   Border    Margin

数值为负值的情况暂不讨论。

## nil

 

 

 

 

 

<Content>代表内容  （现在假设Content是一个人）

 

 

Border 从红线向外数值依次增大   　　　（不吃Content，还有会随意 变胖变瘦）

Padding 从红线向里占地盘　　　　　　（它可能会吃掉Content的一部分内容）

margin 是该元素与其他相邻元素的距离，紫线内是边框安全领域（保持和其他人的车距防止追尾）

 

 

 

 

附上EDGE浏览器的说明：

以及qq邮箱二次验证界面的那颗按钮：

 

 

 

当然我个人最感兴趣的是导航栏，一开始不懂，后来去翻各大网站的html，发现他们导航栏用的CSS里都差不多这样，如下

如IBM中国 官网

 

 

【html】 使用ul做导航栏 - ywq4321的博客 - CSDN博客

 

 

4， 分享我做的网页

https://sky5454.github.io/My-static-Blog

做了两天多的网页作业竟然被老师认为是抄的....）

导航栏

（以Chrome系测试)

还记得上面提到的盒子模型吗？（记得margin默认是只占区块而不显示内容的）

只要把盒子大小间隔调好，你就可以全覆盖地上色

其实根本不难，只是得花时间。用margin padding border以及float调盒子位置，然后用border-raduis调圆角大小（搜索栏那个把input的padding调大，然后）

颜色方面我设置了：    a的color和background-color   nav的background-color    #inav的背景图片

a的伪类hover 变大变色，这样导航栏看起来就是动态的了

<div id="inav">
        <h1 id="header">
            <span style="color:rgba(255, 20, 184, 0.671)">个人</span
                ><span style="color: grey; font-style: inherit; ">博客</span>
        </h1>
        <nav>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="blogs.html">BLOGS</a></li>
                <li><a href="share.html">MUSIC SHARE</a></li>
                <li><a href="about.html">ABOUT</a></li>
            </ul> 
        </nav>
        <div id="search"><input type="text" placeholder="在此搜索"></div>
/*
整条导航栏使用id为inav的<div>块，并设置“无序列表做成的菜单项”左浮动，设置nav、ul、li的内边距，设置列表项内的链接li属性display: block实现了一个横向菜单导航栏，…。导航栏CSS代码如下：*/
 
<style/home.css导航栏部分代码>
* {
    margin: 0;
    padding: 0;
}

h1#header {
    float: left;
    padding-top: 0px;
    padding-left: 50px;
    border: 10px;
}

h1 > span:first-child:hover {
    border-bottom: 3px solid gray;
}
nav a[href="index.html"]{
    border-radius: 6px 6px 0px 0px;
    border-bottom: 3px solid purple;
    
#inav {
    position: fixed;
    top: 0px;
    width: 1920px;    /* 大网页 */
    margin-left: 50;
    padding: 20px;
    border-bottom: 3px solid; 
    background: url(/img/nav.png) center;
    /* background: #528fe99c; */
}
nav a:link {
    text-decoration: none;
    padding: 3px;
    font-size: 20px
}
nav a:hover {
    background-color: rgba(75, 199, 236, 0.5);
    font-size: 130%;
    text-decoration: none;
    color: skyblue;
    padding: 10px;

    border-radius: 6px 6px 0px 0px;
    border-bottom: 3px solid red;
    width: 1000px;
    text-decoration: none;
}

nav a:active {
    color: red;
}

nav {
    width: 700px;
margin-left: 250px;
  /* 把padding变大才能使得border变大，不能单靠margin */
    padding-top: 15px;
    padding-bottom: 40px;
    border-radius: 40px; 
   /* TODO: CSS3过渡动画 */
   border: solid 1px;
   background-color: white;
}
nav ul {
    padding: 3px;
    margin-left: 40px; 
}
nav li {
    float: left;
    display: block;         /*  显示为块级元素，前后会带有换行符 */
    margin-left: 40px;   /* 防止超链接a元素过近导致浏览器坐标变动选择产生不好的视觉效果 */
    z-index: 1;             /* 设置元素的堆叠顺序*/
}

/* 搜索栏外框位置与圆角处理 */
#search {
    margin-top: -53px;
    margin-right: 500px;
    padding: 3px;
    float: right;
    border-radius: 30px;
    border: 2px solid rgb(250, 250, 250);
    background-color: #F0EEEE;
    display: flex;
}
/* 圆角处理搜索栏*/
#search input{
    outline: none;
    border: none;
    border-radius: 20px;
    padding: 4px 60px 2px 20px; 
}

Search搜索框CSS