HTML学习记录 2021.05.13

最新推荐文章于 2024-11-15 11:24:51 发布

Stan_lu

最新推荐文章于 2024-11-15 11:24:51 发布

阅读量187

点赞数 1

分类专栏：自学文章标签： html css

本文链接：https://blog.csdn.net/Stan_lu/article/details/116752794

版权

自学专栏收录该内容

16 篇文章 0 订阅

订阅专栏

学习链接：

HTML: HyperText Markup Language

CSS: Cascading Style Sheets

1、CSS文件的添加方式

css文件路径：

css文件路径

css代码：

header{
    text-align: center;
    color: deeppink;
}

#container{
    text-align: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

p.tip span {
    font-weight:bold;
    color:#ff9955;
}

.gallery{
    float: left;
    width: 150px;
    padding: 20px;
    margin: 20px;
    border: 1px solid red;
}
.gallery.description{
    padding: 10px;
    text-align: center;

}
.gallery:hover {
    cursor: pointer;
    border-radius: 25px;
    box-shadow: 10px -10px grey;
    border: 1px solid #777;
}


.gallery.img{
    width: 150px;
    height: 150px;
}
a:focus-visible{
    color: aqua;
}
a:visited{
    color: seagreen;
}

a:hover {
    color:red;
}

2.CSS部分代码解释

对container的解释

container对应了项目代码中

<div id="container">

这一部分设置的名称

在css文件中通过 #container 的方式设置其属性

#container{
    text-align: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

对gallary的解释

gallery对应了项目代码中

<div class="gallery">

这一部分设置的名称

在css文件中设置项目属性时

可以通过'.'方式检索<div>内部的其他class，例如‘img’ .gallery.img
可以通过‘:’方式更改某一特定class中的某一属性值，例如‘a’ a:visited

.gallery.img{
    width: 150px;
    height: 150px;
}

a:visited{
    color: seagreen;
}

3.HTML部分代码解释

<a>中target标记值的意义：

target中设置的名称对应了不同的弹出页面，如果多个<a>指向了同名target，它们会共用同一个弹出窗口

详见HTML <a> 标签的 target 属性

4.HTML代码：

<!--dtd-->
<!DOCTYPE html>
<html>
<head>
    <title>Web Address</title>
    <!--CSS Styles-->
    <link rel="stylesheet" type="text/css" href="css/imgStyle.css">

    <!--HTML -> DOM -> Apply CSS-->
</head>    

<body>
    <header >

        <h1>Web Address</h1>

    </header>

    <div id="container">
        <p class="tip"><span>Tips: </span>This is a test web site</p>
        <div class="gallery">
            <a href="image/imgBaidu.png" target="_baidu">
                <img src="image/imgBaidu.png">
            </a>
            <a href="https://www.baidu.com" target="_baidu">
                <div class="description">Baidu</div>
            </a>
        </div>
        <div class="gallery">
            <a href="image/imgGoogle.png" target="_google">
                <img src="image/imgGoogle.png">
            </a>
            <a href="https://www.google.com" target="_google">
                <div class="description">Google</div>
            </a>
        </div>
    </div>

</body>

</html>