html和css的内容总结：

最新推荐文章于 2022-06-06 22:24:34 发布

xiaoxindong

最新推荐文章于 2022-06-06 22:24:34 发布

阅读量118

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/xiaoxindong/article/details/119042677

版权

首先我学习了 html 的概念以及他的框架：

有一个文档声明然后接着它的根标签html 加上long=en用title给他起一个标题名最后就是body身体。

其次我学习了很多标签以及标签类型：比如<p>标签（男标签）也是段落标签，<b>加粗标签还有<strong>，(div)标签（男标签），<span>标签 (女标签)，<a>标签，<h1>,<h2>,<h3> <img>人妖标签等等在<img>标签里面用src导入图片 ./ 返回上一级 .//进入到上一级目录。还学习了自定义列表(dl+dt+dd)，有序列表(ol+li)，无序列表(ul+li) 这些都是男标签，以及列表的很多属性:cellspacing 单元格之间的间隙，text-align center文本居中，rowspan跨行，colspan跨列。form标签后面跟的属性有：action表示收集完数据后将数据提交的服务器地址，method 表示以什么样的方式交给服务器 GET就是GET请求，name”表单名称“ 选择一个什么样的列表。input标签后面跟的属性类型有：text 表示一个普通的文本框 ,password 表示一个密码框，number 表示一个数字输入框,adio 表示单选, checkbox 多选等许多类型还有默认选中checked，下拉菜单select+option。

css的10个选择器：1.通配符选择器，2.标签选择器，3.类选择器，4.id选择器，5.后代选择器，6.儿子选择器，7.兄弟选择器，8.位置伪类选择器，9.input伪类选择器，10.伪元素选择器

然后还学习了css里面很多的属性内容：font-size字体大小，font-styl表示文本样式，letter-spacing；字间距，text-shadow表示字体阴影，italic 倾斜， normal 正常，line-height行高。

变性手术：男变女：display：inline，女变男：display：block，变人妖：display：inline-blocke。

overflow：hidden 处理隐藏部分 overflow： visible 不处理
overflow： scroll 出现滚动条
overflow：auto 不同场合意思不同尽量不用 resize：none 边框不能放大缩小
overflow：inherit 表示继承父级的overflow属性值 resize：auto 边框可以拖动大小
word-break: normal;默认浏览器格式
word-break：keep-all保证单词完整性
word-break: break-all保证优先铺满一行
word-break: break-word;保证单词完整性
white-space：nowrap 内容超出不换行

border-top 上边框 none表示什么都没有 border-radius盒子圆角
padding 内边距 margin外边距 ,margin-top 上边距 margin-left;左边距 padding-top 上面内边距 background-repeat: no-repeat; 背景图片不平铺等等很多。

css里面的就是来美化hmtl里面的内容比如我做一个视频内容界面：

我先用div标签创建一个大盒子ly 设宽为1879px；高为946px；border:1px solid red 边框颜色为红色，然后在这个大盒子ly里面嵌套3个小盒子分别在css里面给三个小盒子设置宽高，边框样式颜色，设置需要的背景颜色，然后在body里面写上文本内容在css里面进行美化居中字体颜色字体大小内外边距相对定位等让盒子到你想要的位置，中间的图片先创建一个盒子然后在css 里面设置宽高，用 background: url(../images/丽颖.jpg) ;引用这个图片然后可以在后面选择是否平铺如果不平铺就是no-repeat 图片居中 center 最下面的内容我创了6个小盒子分别给他们设置适当的宽高字体颜色大小还有边框圆角边框背景颜色还用 margin-left 把他们调到我要的位置最后把所有边框的颜色去掉就变成了一个完整的视频界面图片如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>女神赵丽颖</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .ly{
            width: 1879px;
            height: 946px;
            /* border: 1px solid red; */
        }
        .ly1{
            width: 1859px;
            height: 70px;
            /* border: 1px solid black; */
            background: rgb(59, 58, 58);
            position: relative;
        }
        .ly2{
            width: 300px;
            height: 50px;
            /* border: 1px solid blue; */
            font-size: 20px;
            color: white;
            margin: 0px auto;
            margin-top: 20px;
        }
        .ly3{
            width: 100px;
            height: 35px;
            /* border: 1px solid yellow */
            background: rgb(20, 20, 20);
            position: absolute;
            top: 3px;
            left: 0px;
            color: #ffff;
            border-radius: 15px;
            text-align: center;
            text-decoration: none;
            line-height: 30px;
            margin-left: 30px;

        }
        .ly4{
            width: 50px;
            height: 50px;
            border: 1px solid black;
            display:inline-block;
            text-align: center;
            border-radius: 500px;
            background: rgb(20, 20, 20);
            color: #ffff;
            position: absolute;
            top: 0px;
            right:0px;
            font-size: 25px;
            text-decoration: none;
        }
        .ly5{
            width: 1859px;
            height: 700px;
            /* border: 1px solid red; */
            background: url(../images/丽颖.jpg) ;
        

            position: relative;
        }
        .ly6{
            display:inline-block;
            width: 50px;
            height: 70px;
            /* border: 1px solid blueviolet; */
            position: absolute;
            top: 330px;
            right: 0px;
            background: rgb(20, 20, 20);
            color: #ffff;
            font-size: 35px;
            text-align: center;
            text-decoration: none;
            line-height: 65px;
        }
        .ly7{
            height: 70px;
            width: 1859px;
            /* border: 1px solid rebeccapurple; */
            background: rgb(59, 58, 58);
        }
        .ly8{
            width: 100px;
            height: 70px;
            /* border: 1px solid rosybrown; */
            display:inline-block;
            text-align: center;
            color: rgb(247, 243, 243);
            font-size: 40px;
            float: left;
        }
        .ljh1{
            height: 30px;
            width: 1859px;
            /* border: 1px solid brown; */
            background-color: rgb(0, 0, 0);
        }
        .ly9{
            width: 100px;
            height: 70px;
            /* border: 1px solid yellow; */
            display: inline-block;
            float: left;
            font-size: 40px;
            color: rgb(247, 243, 243);
            text-decoration: none;
        }
        .ly10{
            width: 300px;
            height: 70px;
            /* border: 1px solid orangered; */
            display: inline-block;
            text-align: center;
            font-size: 30px;
            float: left;
            line-height: 70px;
            color: rgba(253, 250, 250, 0.753);
        }
        .ly11{
            width: 90px;
            height: 50px;
            display: inline-block;
            /* border: 1px solid springgreen; */
            text-align: center;
            float: left;
            font-size: 30px;
            color: #ffff;
            text-decoration: none;
            line-height: 50px;
            background: rgba(0, 0, 0, 0.431);
            border-radius: 40%;
            margin-top: 10px;
        }
        .ly12{
            width: 90px;
            height: 50px;
            /* border: 1px solid palevioletred; */
            display: inline-block;
            color: #ffff;
            text-decoration: none;
            line-height: 50px;
            float: right;
            margin-right: 200px;
            text-align: center;
            background: rgb(0, 0, 0,0.431);
            border-radius: 40%;
            font-size: 30px;
            margin-top: 10px;
        }
        .ly13{
            width: 90px;
            height: 50px;
            /* border: 1px solid purple; */
            display: inline-block;
            font-size: 30px;
            color: #ffff;
            float: right;
            text-decoration: none;
            margin-right: -200px;
            border-radius: 40%;
            text-align: center;
            line-height: 50px;
            background:rgb(0, 0, 0,0.431);
            margin-top: 10px;
            
        }
    </style>
</head>
<body>
    <div class="ly">
        <div class="ly1">
            <h2 class="ly2">【花絮】颖宝综艺真人秀,贼可爱</h2>
            <a class="ly3" href="#">打开主界面</a>
            <a class="ly4" href="#">...</a>
            <div class="ly5"></div>
            <a class="ly6" href="#">></a>
            <div class="ljh1"></div>
            <div class="ly7">
                <a class="ly8" href="#">||</a>
                <a class="ly9" href="#">▶|</a>
                <span class="ly10">12:25:69/00:46:29</span>
                <a class="ly11" href="#">• 弹</a>
                <a class="ly12" href="#">蓝光</a>
                <a class="ly13" href="#">选集</a>
            </div>
        </div>
    </div>
</body>
</html>

xiaoxindong

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html和css的内容总结：

首先我学习了 html 的概念以及他的框架：有一个文档声明然后接着它的根标签html 加上long=en用title给他起一个标题名最后就是body身体。其次我学习了很多标签以及标签类型：比如<p>标签（男标签）也是段落标签，<b>加粗标签还有<strong>，(div)标签（男标签），<span>标签 (女标签)，<a>标签，<h1>,<h2>,<h3> <img>人妖标签等等.
复制链接

扫一扫