html+css

最新推荐文章于 2024-08-07 14:19:47 发布

是陈大呀

最新推荐文章于 2024-08-07 14:19:47 发布

阅读量62

点赞数

分类专栏：前端基础文章标签：随笔 html css

本文链接：https://blog.csdn.net/c_universe/article/details/100998184

版权

前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html部分

http跳转的是外部链接
div盒子默认占用一行

margin:auto只针对元素的居中有效果
1.display:block 块级元素 div 有高度宽度占用一整行空间
2.display:inline-block 行内块级元素有宽度高度共用一整行空间
可以当做文字处理
3.display:inline 行内元素公共一行没有宽度高度
body是最外层的盒子，指的是浏览器。
选择页面的标签有两种选择器一种类选择器二种标签选择器

div表示一个盒子
样式在css书写
div盒子默认占据一整行
border表示边框

input样式

input type=“text”--------------------文本框
input type=“password” ----------密码框
input type=“submit” ------------提交按钮
input type=“reset” ------------- 重置按钮
input type=“radio” ----------------单选框
input type=“checkbox” ----------复选框
input type=“button” -----------普通按钮
input type=“file” ----------文件选择控件
input type=“hidden” ------------- 隐藏框
input type=“image” -----------图片按钮

css部分

body是最外层的盒子，指的是浏览器。
选择页面的标签有两种选择器一种类选择器二种标签选择器
*表示所有的标签 body ul li css reset
color是文字颜色 background是背景颜色

和文字相关的样式都在font集合里面
和文本相关在样式都在text集合里面
~表示兄弟选择器选择兄弟但是只能选择到弟弟空格表示后代选择器

基线
只有display：inline-block的盒子才有基线基线默认是在顶部 vertical-aglin来调整

鼠标移入效果使用
例如：

:hover {
	    background: #252947;
    	color: aliceblue;
}

如果想要过渡样式可以使用-transition

overflow：hidden:超出隐藏

margin
margin-auto:分配可用空间
margin-left/margin-right；auto是分配可以用的空间
margin-top、maring-bottom：auto，相当于 margin-top、maring-bottom：0px
四个方向都auto 上下auto=0
margin：auto让盒子居中的原理

定位

之前接触的float 抽出文档流
定位有三个重要的记忆点定位 relative相对定位 absolute绝对定位 fixed固定定位
1.定位的标签会抽出文档流
2.定位一定要配合left right top bottom的方向名词使用
3.定位，一定要弄清楚定位点在哪里

一.相对定位 positon：relative
1.作用：做微调
2.定位点：本身位置的左上角
3.关于抽出文档流：相对定位是半抽出文档流, 本体还在文档流里面占着位置，分身脱离文档流飞出去流

二、固定定位 position:fixed
1.作用：把盒子固定到浏览器的某个位置
2.定位点:浏览器窗口的左上角
3.关于抽出文档流：绝对抽出文档流

三、绝对定位 position：absolute
position：absolute 不能单独用
口诀是：子绝父相（子集绝对，父集相对）
1.作用：灵活布局----盖印效果
2.定位点：父集的左上角
3.关于抽出文档流：绝对抽出文档流

权值

每一个css的选择器都有一个相对的重要程度值，也就是权重的值。css选择规则的优先级是按照 css选择器的权值的比较来确定的。
优先的规则：
　　　1.css选择规则的权值不同时，权值高的优先；
　　　2.css选择规则的权值相同时，后定义的规则优先；
　　　3. css属性后面加 !important 时，无条件绝对优先；

html代码范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网站题目</title>
    <link rel="stylesheet" href="">
    <!-- href连接d对应的文件 -->
</head>
<body>
    <!-- 具体内容 -->
</body>
</html>

<body>
    <div class="nav_box">
        <div class="nav">
            <div class="logo">
                    <img src="../img/brand.png" alt="">
            </div>
             <!-- http跳转的是外部链接 -->
            <a href="index.html"><div class="box">首页</div></a><!--链接-->
            <a href="game.html"><div class="box">游戏</div></a><!--链接-->

            <div class="box">投诉</div>
            <div class="box">新闻</div>
            <div class="box">关于</div>
            <div class="box">联系</div>

            <button class="btn">加入我们</button><!--按钮-->
        </div>
    </div>       

    <input type="radio" name="aa" id="banner1">
    <input type="radio" name="aa" id="banner2">
    <input type="radio" name="aa" id="banner3">
    <input type="radio" name="aa" id="banner4">
    
    <div class="banner">
        <ul>
            <label for="banner1"></label>
            <label for="banner2"></label>
            <label for="banner3"></label>
            <label for="banner4"></label>
        </ul>
        <ul>
            <li><img src="../img/banner1.jpg" class="banner1"></li>
            <li><img src="../img/banner2.jpg" class="banner2"></li>
            <li><img src="../img/banner3.jpg" class="banner3"></li>
            <li><img src="../img/banner4.jpg" class="banner4"></li>
        </ul>
    </div>   
    </div> 
</body>

CSS部分代码范例

*
{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.box
{    
    display: inline-block;
    font-size: 14px;
    width: 90px;
    /* px是像素单位 */
    height: 60px;
    background:#191d3a;
    text-align: center;
    color: rgba(219, 214, 214, 0.651);
    /* 控制水平 */
    /*行间距*/
    line-height: 60px;
    /* line-height和height一样 */
}
.box:hover
{   
    /* 鼠标移入的效果 */
    background: #252947;
    color: aliceblue;
}
.nav
{
    /* 外边有个固定宽度在盒子保护 */
    width: 800px;
    height: 60px;
    margin: auto;
    font-size: 0px;
    line-height: 60px;
    background:#191d3a;
}
/* .box就是表示box的类名 */
.nav_box
{
    width: 100%;
    height: 60px;
    background:#191d3a;
    /* 百分比表示的是集成父级的百分之多少 */
}
.btn
{
    width: 90px;
    height: 50px;
    background: #193e68;
    border: none;
    outline: none;
    border-radius: 10px;
    color: rgba(219, 214, 214, 0.651);
    cursor: pointer;
}
.btn:hover
{   
    /* 鼠标移入的效果 */
    background: #000000;
    color: rgb(255, 255, 255);
    
}
.logo,.box,.btn
/* ,并集选择器 */
{

    vertical-align: middle
}
.logo
{
    display: inline-block;
    height: 35px;
    /* line-height: 60px;  行间距 */
}
.logo img
{
    width: 160px;
}
#banner1,#banner2,#banner3,#banner4
{
    vertical-align:text-top
}
#banner1:checked~.banner>ul:nth-child(2)
{
    margin-left: 0;
}
#banner2:checked~.banner>ul:nth-child(2)
{
    margin-left: -100%; 
}
#banner3:checked~.banner>ul:nth-child(2)
{
    margin-left: -200%;
}
#banner4:checked~.banner>ul:nth-child(2)
{
    margin-left: -300%;
}

.banner
{
    width: 100%;
    overflow: hidden;
    min-width:800px;
    position: relative;
} 
.banner>ul:nth-child(2)
{
    width: 400%;  
    transition: margin-left 1s;
}
.banner>ul:nth-child(2)>li
{
    float: left;
    width: 25%;    
}
.banner>ul:nth-child(2)>li>img
{
    width: 100%;
}

input
{
    display: none;
}

.banner>ul:nth-child(1)
{
    position: absolute;
    left: 45%;
    top: 90%;
}
label
{
    display: inline-block;
    width: 20px;
    height: 10px;
    background: rgb(255, 255, 255);
    border-radius: 20px;
}

.banner>ul:nth-child(1)>label:hover
{
    background: rgba(219, 214, 214, 0.651);
}

是陈大呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css

简单网页制作（仅html+css）http跳转的是外部链接div盒子默认占用一行margin:auto只针对元素的居中有效果1.display:block 块级元素 div 有高度宽度占用一整行空间2.display:inline-block 行内块级元素有宽度高度共用一整行空间可以当做文字处理3.display:inline 行内元素公共一行没有宽度高度html部分...
复制链接

扫一扫

专栏目录