html与css进阶

刺骨的言语ヽ痛彻心扉 2021-12-22 05:27 254阅读 0赞

# 一、相对地址和绝对地址： #

相对地址：“./” 表示当前文件所在目录 “…/” 表示当前文件所在目录的上一级目录  
绝对地址：做为了解，一般不用

# 二、列表标签相关： #

新闻标题列表、文章标题列表、菜单要使用列表标签  
列表创建的快捷键：ul>(li>a\{列表文字\})\*8  
多行操作：点击一行，然后按住alt键不放，再点击其他行，就可以选中多行  
列表标签样式：list-style:none 去掉小圆点  
列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是含有语义的，标签结构如下：

<ul>
        <li>列表标题一</li>
        <li>列表标题二</li>
        <li>列表标题三</li>
    </ul>

# 三、表单，记住常用的标签： #

form标签 单行文本输入框 密码输入框 提交按钮 普通按钮创建 下拉框  
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：  
1、标签 定义整体的表单区域  
action属性 定义表单数据提交地址  
method属性 定义表单提交的方式，一般有“get”方式和“post”方式  
2、标签 为表单元素定义文字标注  
3、标签 定义通用的表单元素  
type属性  
type=“text” 定义单行文本输入框  
type=“password” 定义密码输入框  
type=“radio” 定义单选框  
type=“checkbox” 定义复选框  
type=“file” 定义上传文件  
type=“submit” 定义提交按钮  
type=“reset” 定义重置按钮  
type=“button” 定义一个普通按钮  
value属性 定义表单元素的值  
name属性 定义表单元素的名称，此名称是提交数据时的键名  
4、标签 定义多行文本输入框  
5、标签 定义下拉表单元素  
6、标签 与标签配合，定义下拉表单元素中的选项  
注册表单实例：

form action="http://www..." method="get">
    <p>
    <label>姓名：</label><input type="text" name="username" />
    </p>
    <p>
    <label>密码：</label><input type="password" name="password" />
    </p>
    <p>
    <label>性别：</label>
    <input type="radio" name="gender" value="0" /> 男
    <input type="radio" name="gender" value="1" /> 女
    </p>
    <p>
    <label>爱好：</label>
    <input type="checkbox" name="like" value="sing" /> 唱歌
    <input type="checkbox" name="like" value="run" /> 跑步
    <input type="checkbox" name="like" value="swiming" /> 游泳
    </p>
    <p>
    <label>照片：</label>
    <input type="file" name="person_pic">
    </p>
    <p>
    <label>个人描述：</label>
    <textarea name="about"></textarea>
    </p>
    <p>
    <label>籍贯：</label>
    <select name="site">
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
    </select>
    </p>
    <p>
    <input type="submit" name="" value="提交">
    <input type="reset" name="" value="重置">
    </p>
    </form>

# 四、三种选择器： #

Id选择器： 通过id名称来选择标签(不推荐使用)

#box{color:red} 
    ......
    <p id="box">这是一个段落标签</p>   
    <p>这是第二个段落标签</p> 
    <p>这是第三个段落标签</p>

组选择器： 将通过的样式抽取出来写在一起，选择器之间用“，”隔开

.box1,.box2,.box3{width:100px;height:100px}
    .box1{background:red}
    .box2{background:pink}
    .box2{background:gold}
    
    <div class="box1">....</div>
    <div class="box2">....</div>
    <div class="box3">....</div>

伪类选择器： 定义鼠标悬停时标签的样式

.box1:{width:100px;height:100px;background:gold;}
    .box1:hover{width:300px;}

# 五、盒子模型： #

padding 的定义方式  
margin 的定义方式  
盒子的真实尺寸计算  
设置宽高

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
    height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

设置边框  
设置一边的边框，比如顶部边框，可以按如下设置：

border-top:10px solid red;

其中10px表示线框的粗细；solid表示线性。  
设置其它三个边的方法和上面一样，把上面的’top’换成’left’就是设置左边，换成’right’就是设置右边，换成’bottom’就是设置底边。  
四个边如果设置一样，可以将四个边的设置合并成一句：

border:10px solid red;

设置内间距padding  
设置盒子四边的内间距，可设置如下：

padding-top：20px;     /* 设置顶部内间距20px */ 
    padding-left:30px;     /* 设置左边内间距30px */ 
    padding-right:40px;    /* 设置右边内间距40px */ 
    padding-bottom:50px;   /* 设置底部内间距50px */

上面的设置可以简写如下：

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
    四个方向的内边距值。 */

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
    padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
    padding：20px; /* 设置四边内边距为20px */

设置外间距margin  
外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding’换成’margin’就是外边距设置方法。  
盒子的真实尺寸  
盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：  
盒子宽度 = width + padding左右 + border左右  
盒子高度 = height + padding上下 + border上下  
块元素居中技巧  
块元素如果想设置相对页面水平居中，可以使用margin值中的auto关键字，“auto”只能用于左右的margin设置，不能用于上下的：

.box{
          width:300px;
          height:300px;
          background:gold;
          margin-left:0px;
          margin-top:0px;
          margin-left:auto;
          margin-right:auto;    
    }

.box{
         width:300px;
         height:300px;
         background:gold;
         margin:0px auto;   
     }