CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
    <head>
        <!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HtmlAll</title>
        <!-- 这里是我们引入外部配置的Css样式文件,也是开发最主流的方式 -->
        <link rel="stylesheet" type="text/css" href="css.css"/>
        <style type="text/css">
            /* 这是css的语言注释 */
            /* id选择器,写法#后面加ID然后大括号 */
            #usernameError{
                font-size: 30px;
                color: red;
            }
            /* 标签选择器,这个作用范围比较广,他会对当前页面的所有该标签生效 */
            div{
                background-color: black;
                border: 1px solid red;
                width: 100px;
                height: 100px;
            }
            /* 类选择器,.后面类名大括号 */
            /* 这种方式所有是这个class都可以使用到这个效果,优点是我们可以实现跨标签 */
            /* 这种所有标签都可以,这要class信息一样即可 */
            .myClass{
                border: red 1px solid;
                width: 80px;
                height: 30px;
            }
        </style>
    </head>
    <body>
        <!-- 引入CSS效果的第一种方式,直接在元素上设置 -->
        <div style="width: 300px; height: 300px; background-color: #CCFFFF;
         display: block; border-color: red; border-width: 1px; border-style: solid;"></div>
        <!-- width宽度,height高度,bakgroundcolor背景色设置,display布局样式none就是隐藏,block表示显示 -->
        <!-- border默认不显示,我们要通过设置是否显示来显示该边框,跨域设置颜色宽度 -->
        <div style="width: 300px; height: 300px; background-color: #CCFFFF;
         display: block; border: black 1px solid;"></div>
        <!-- 第二种设置方法,直接在border内设置所有的信息,样式还能这样写 -->
        <span id="usernameError">对不起,用户名不能为空</span>
        <div></div>
        <div></div>
        <input type="text" class="myClass"/>
        <select class="myClass">
            <option>专科</option>
            <option>本科</option>
            <option selected>研究生</option>
            <option>硕士</option>
        </select>
        <a href="http://www.baidu.com">百度一下</a>
        <span id="baiDuSpan">点击我链接到百度</span>
        <ul>
            <li>中国
                <ul>
                    <li>北京</li>
                    <li>上海</li>
                    <li>广州</li>
                </ul>
            </li>
            <li>美国</li>
            <li>俄国</li>
        </ul>
        <div id="div1">
            
        </div>
    </body>
</html>

<!DOCTYPE html> <html lang="en" id="myHtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HtmlAll</title> <link rel="stylesheet" type="text/css" href="css.css"/> <style type="text/css"> /* 这是css的语言注释 */ /* id选择器,写法#后面加ID然后大括号 */ #usernameError{ font-size: 30px; color: red; } /* 标签选择器,这个作用范围比较广,他会对当前页面的所有该标签生效 */ div{ background-color: black; border: 1px solid red; width: 100px; height: 100px; } /* 类选择器,.后面类名大括号 */ /* 这种方式所有是这个class都可以使用到这个效果,优点是我们可以实现跨标签 */ /* 这种所有标签都可以,这要class信息一样即可 */ .myClass{ border: red 1px solid; width: 80px; height: 30px; } </style> </head> <body>

对不起,用户名不能为空

<input type="text" class="myClass"/> <select class="myClass"> <option>专科</option> <option>本科</option> <option selected>研究生</option> <option>硕士</option> </select> 百度一下点击我链接到百度

中国
- 北京
- 上海
- 广州
美国
俄国

     </div>
 </body>

</html>

a{
    text-decoration: none;
    font: red;
}
#baiDuSpan
{
    text-decoration: underline;
    cursor: pointer;
}
/* cursor是鼠标样式,pointer是小手,hand也是,建议使用pointer */
/* wait会显示转圈圈 */
ul{
    list-style-type: none;
}
/* 通过设置list-style-type为none就可以去掉我们无序列表和有序列表的前面的符号 */
#div1{
    position: absolute;
    border: 1px solid black;
    width: 300px;
    height: 300px;
    left: 100px;
    right: 100px;
}
/* position: absolute;设置绝对定位 */
a{
text-decoration: none;
font: red;
}

#baiDuSpan
{
text-decoration: underline;
cursor: pointer;
}

/* cursor是鼠标样式,pointer是小手,hand也是,建议使用pointer /
/ wait会显示转圈圈 */

ul{
list-style-type: none;
}
/* 通过设置list-style-type为none就可以去掉我们无序列表和有序列表的前面的符号 */

#div1{
position: absolute;
border: 1px solid black;
width: 300px;
height: 300px;
left: 100px;
right: 100px;
}
/* position: absolute;设置绝对定位 */

标签： css3 css 前端

本文转载自: https://blog.csdn.net/2201_75960169/article/details/134160802
版权归原作者 旧约Alatus 所有，如有侵权，请联系我们删除。

CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

发表评论

“CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航