荒天帝网页的制作

最新推荐文章于 2024-08-17 12:54:01 发布

ⁱ小罗

最新推荐文章于 2024-08-17 12:54:01 发布

阅读量871

点赞数 14

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_63380794/article/details/137119597

版权

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小小罗的网页</title>
    <style>
        .c {
            background-image: url(https://img0.baidu.com/it/u=2163005058,3844489451&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422);
            width: 600px;
            height: 800px;
            /* 设置边框 */
            border: 10px  solid red;
    
      
        }

        .c1 {
            color: rgb(233, 27, 27);
            font-size: 60px;
            font-weight: 600;
            padding-left: 20px;
            text-align: center;
        }

        .c2 {
            font-size: 50px;
            font-weight: 300;
            line-height: 100px;
            padding-top: 0px;
            padding-left: 20px;
            text-align: center;

        }

        .c3 {
            color: rgba(138, 132, 133, 0.836);
            font-size: 30px;
            /* 推 */
            /*  padding-left: 66px; */
            /* 可以调节一第一个为准的间距 */
            height: 125px;
            /*  width: 600px; */
            text-align: center;
        }

        .c4 {
            color: rgba(138, 132, 133, 0.836);
            font-size: 30px;
            /* 可以调节一第一个为准的间距 */
            height: 125px;
            text-align: center;
        }

        .c5 {
            font-size: 30px;
            text-align: center;
            /* 与上一个边框的距离 */
            margin-top: 40px;
        }
        .c6{
            font-size: 10px;
            
padding-left: 500px;
padding-top: 0px;
        }
    </style>
</head>

<body>
    <div class="c">
        <div class="c1">荒天帝</div>
        <!-- 注意加网页还可以输入文字，两个挨着方便同样字体 -->
        <div class="c2">独断万古！<a href="https://haokan.baidu.com/v?pd=wisenatural&vid=1366558448668304121">点击</a></div>
        <div class="c3">哇 <input type="text" placeholder="请输入"></div>
        <div class="c3">涂 <input type="text" placeholder="请输入"></div>
        <div class="c3">仕 <input type="text" placeholder="请输入"></div>
        <!-- text 后面加size可以调整大小 -->
        <div class="c4">梻 <input type="text " size="7px" placeholder="请输入"> <button style="width: 120px;">哈哈</button>
        </div>
        <!-- 分号后面可以加很多参数 -->
        <div class="c5"><button style="width: 230px;height: 40px;;background-color: crimson;"><a
                    href="https://quanmin.baidu.com/sv?source=share-h5&pd=qm_share_search&vid=4640664077600232593">点击观看</a></button>
        
        </div>
        <!-- ./可做刷新页 -->
<div class="c6"><button ><a href="./htd.html">刷新页面</a></button></div>
    </div>
</body>

</html>

2.图示

3.标签

标签关系

4.指令

按住shift 加！弹出框架

<br>换行指令；后面跟内容可以直接换行。

<h1>-<h6>标题标签，自动换行，1——6字体由大到小。

dispaly:online-block:修改标签属性为行内块，这样就可以在同一行，也可以设置宽高了。

height:“___”px:设置高。

width："_____"px设置宽。

<img> sar="加图片地址"

<span 可以加颜色内容，定义>:可以写字，设置字体颜色、大小。但是不能设置宽高。

backgrond--size:" "px " "px;。设置背景宽高，用来更好的更改背景图片，看得全。

background--image:url(可以添加图片网上地址或./图片的绝对路径，在同一个文件夹中)或者url（./家的位置，可以用来刷新页面）。

font--size:" "px;设置字体的大小。

text--align:center;文本的居中。

font--weight:"数字"字体的粗细，没有px 没有单位。

margin---top:"数字"px 上边距。

margin---left:"数字"px 左边距。

padding(中文垫子)--top：“数字”px 从上往下推，如果头上有框，按头上的计算。

边框宽度、样式、颜色：broder:"数字"px 空格键两次 solid color（颜色）；注意，冒号在后面扩前面的。

补

标签的分类:

行内标签：在网页中可以与其他标签同处一行，不能设置宽高例：span a b em del

块级标签：在网页中不可以与其他标签同处一行，可以设置宽高例：div h1~h6 p

行内块标签：在网页中可以与其他标签同处一行，可以设置宽高例：img

css样式:

书写位置：

1. 行内样式:写在标签内部

2. 内部样式:head标签中加入style标签书写样式

3. 外部样式：新建一个.css文件样式写在文件中通过link标签引入，在herf里输入

可以在css里美化图片，在里面可以修改字体颜色啥的，就是单独写出来，在合并。

伪类选择器：

link：未访问的样式，单改颜色

visited：访问过的样式

hover:鼠标悬停的样式

active：点击时的样式一瞬间的样式

link -visited -hover-active ：l-v-h-a 顺序最好不要改变

复合选择器

后代选择器：祖先后代

并集选择器：标签名,标签名

交集选择器：

兄弟选择器：前一个标签+后一个标签选中紧挨着的下一个标签

兄弟选择器：前一个标签~后一个标签

伪元素选择器：

a标签取消下划线

text--decoration:one;

列表

无序列表：

ul:父级标签

ⁱ小罗

关注

14
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
荒天帝网页的制作

background--image:url(可以添加图片网上地址或./图片的绝对路径，在同一个文件夹中)或者url（./家的位置，可以用来刷新页面）。dispaly:online-block:修改标签属性为行内块，这样就可以在同一行，也可以设置宽高了。link -visited -hover-active ：l-v-h-a 顺序最好不要改变。可以在css里美化图片，在里面可以修改字体颜色啥的，就是单独写出来，在合并。font--weight:"数字"字体的粗细，没有px 没有单位。
复制链接

扫一扫