zoukankan html css js c++ java

day-13 web前端

前端用到html css js

html

1.html简介

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title>女神</title>
<style>
.lvmao{
color: greenyellow;
}

</style>
</head>
<body>

<!--
h1~h6
div
span
a
img
ul
li
ol
li
table
form

文本级的标签：h1~h6 独占一行 span:小跨域的标签
-->
<h1>女神开车去西二旗见金老板</h1>
<h2>女神开车去西二旗见金老板</h2>
<h3>女神开车去西二旗见金老板</h3>
<h4>女神开车去西二旗见金老板</h4>
<h5>女神开车去西二旗见金老板</h5>
<h6>女神开车去西二旗见金老板</h6>
女神开车去西二旗见<span class="lvmao">金老板</span>
<span>女神开车去西二旗见金老板1</span><span>女神开车去西二旗见金老板2</span>

</body>
</html>

2. head标签中的相关标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
选择器: 基础选择器和高级选择器
标签选择器
*/
html{
/*css的继承只有个别的属性 color font-xxx text-xxx line-**/
color: #fff;
font-size: 14px;
/*text-align: center;*/
}
body{
margin: 0;
}
.top{
100% ;
height: 40px;
background-color: black;
color: #fff;
/*让文本水平居中*/
/*text-align: center;*/
line-height: 40px;
}
.header{
100%;
height: 100px;
background-color: red;
}
.content{
100%;
/*height: 2000px;*/
background-color: mediumpurple;
}
.footer{
100%;
height: 400px;
background-color: grey;

}
/*.hei{*/
/* 100px;*/
/*height: 40px;*/
/*background-color: red;*/
/*overflow: hidden;*/
/*}*/

.container{
1226px;
height: 100%;
/*background-color: transparent;*/

/*让盒子水平居中*/
margin-left: auto;
margin-right: auto;
}

</style>
</head>
<body>

<div class="top">
<div class="container">
top黑色区域
</div>
</div>
<div class="header">
<div class="container">
导航区域
</div>
</div>
<div class="content">
<div class="container">
主体内容区域
</div>
</div>
<div class="footer">
<div class="container">
脚后跟
</div>
</div>

</body>
</html>

<!--
h1~h6：标题标签
span
div：division 分割块区域
a
img
ul
li
ol
li
table
form

-->

3. 超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html{
            font-size: 14px;
        }
        body{
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        .top{
             100%;
            height: 40px;
            background-color: #333;
            line-height: 40px;
            /*color: #b0b0b0;*/
        }
        .container{
             1226px;
            height: 100%;
            /*两个值： 上下  左右*/
            /*三个值： 上 左右 下*/
            /*四个值： 上 右 下 左*/
            /*一个值： */
            margin: 0 auto;
        }
        /*高级选择器 后代选择器*/
        .top a{
            color: #b0b0b0;
        }
        .top .sep{
            color: #424242;
            margin: 0 6px;
        }
        
    </style>
</head>
<body>
 <!--
        1.独占一行的标签：h1~h6,div
        2.在一行内显示的标签：span a
    -->

    <div class="top">
        <div class="container">
            <div class="top-info">
                <a href="#">小米商城</a>
                <span class="sep">|</span>
                <a href="#">loT</a>
                 <span class="sep">|</span>
                <a href="#">云服务</a>
                 <span class="sep">|</span>
                <a href="#">金融</a>
                 <span class="sep">|</span>
                <a href="#">有品</a>
                 <span class="sep">|</span>
                <a href="#">小爱开放平台</a>
                 <span class="sep">|</span>
                <a href="#">政企服务</a>
            </div>
        </div>
    </div>

</body>
</html>
4. img浮动标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
             100px;
            height: 50px;
        }
        a{
            display: inline-block;
             200px;
            height: 300px;
        }
    </style>
</head>
<body>
 <!--
        块级标签： display:block;  h1~h6,div
                   1.独占一行的标签：
                  2.可以设置宽高 如果不设置宽度 它的宽度是父亲的100%
        行内标签：display:inline; span a
                    1.在一行内显示的标签：
                  2.不能设置宽高 如果不设置宽高 那么默认是字体的大小

         行内块标签：1.在一行内显示  2.可以设置宽高  img input

         标签嵌套：
                1.行内标签可以包含行内标签
                2.行内标签不能包含块级标签

    -->
    <div class="box">
        <span>美女</span>
        <a href="#">
              <img src="./01.jpg" alt="图片来了" width="200" height="300">
             <span></span>

        </a>
        <img src="./01.jpg" alt="图片来了" width="200">
    </div>

</body>
</html>
5. 浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html{
            font-size: 14px;
        }
        body,ul{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .top{
             100%;
            height: 40px;
            background-color: #333;
            line-height: 40px;
            /*color: #b0b0b0;*/
        }
        .container{
             1226px;
            height: 100%;
            /*两个值： 上下  左右*/
            /*三个值： 上 左右 下*/
            /*四个值： 上 右 下 左*/
            /*一个值： */
            margin: 0 auto;
        }
        /*高级选择器 后代选择器*/
        .top a{
            color: #b0b0b0;
        }
        .top .sep{
            color: #424242;
            margin: 0 6px;
        }
        .top-info{
            float:left;
        }
        .top-cart{
            float: right;
            color: red;
        }
        .top-login{
            float:right;
            margin-right: 20px;
             200px;
            height: 40px;
        }
        .content {
             100%;
        }
        .content ul li{
            float: left;
             25%;
            height: 300px;
            background-color: grey;
        }

        /*.ttt{*/
            /*float:left;*/
            /* 100px;*/
            /*height: 100px;*/
            /*line-height: 100px;*/
        /*}*/
    </style>
</head>
<body>
 <!--
        1.独占一行的标签：h1~h6,div
        2.在一行内显示的标签：span a
    -->

    <div class="top">
        <div class="container">
            <div class="top-info">
                <a href="#">小米商城</a>
                <span class="sep">|</span>
                <a href="#">loT</a>
                 <span class="sep">|</span>
                <a href="#">云服务</a>
                 <span class="sep">|</span>
                <a href="#">金融</a>
                 <span class="sep">|</span>
                <a href="#">有品</a>
                 <span class="sep">|</span>
                <a href="#">小爱开放平台</a>
                 <span class="sep">|</span>
                <a href="#">政企服务</a>
            </div>

            <div class="top-cart">购物车</div>
            <div class="top-login">
                <a href="#">登陆</a>
                <span class="sep">|</span>
                <a href="#">注册</a>
                <span class="sep">|</span>
                <a href="#">消息通知</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>

            </ul>

        </div>
    </div>
    <!--<span class="ttt">个哈哈哈哈</span>-->

</body>
</html>
6. 清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html{
            font-size: 14px;
        }
        body,ul{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .top{
             100%;
            height: 40px;
            background-color: #333;
            line-height: 40px;
            /*color: #b0b0b0;*/
        }
        .container{
             1226px;
            height: 100%;
            /*两个值： 上下  左右*/
            /*三个值： 上 左右 下*/
            /*四个值： 上 右 下 左*/
            /*一个值： */
            margin: 0 auto;
        }
        /*高级选择器 后代选择器*/
        .top a{
            color: #b0b0b0;
        }
        .top .sep{
            color: #424242;
            margin: 0 6px;
        }
        .top-info{
            float:left;
        }
        .top-cart{
            float: right;
            color: red;
        }
        .top-login{
            float:right;
            margin-right: 20px;
             200px;
            height: 40px;
        }
        .content {
             100%;
        }
        .content ul .item{
            float: left;
             25%;
            height: 300px;
            background-color: grey;
        }
        .uuu{
             100px;
            height: 400px;
            background-color: red;
        }
        .clearfix{
            clear: both;
        }

        /*.ttt{*/
            /*float:left;*/
            /* 100px;*/
            /*height: 100px;*/
            /*line-height: 100px;*/
        /*}*/
    </style>
</head>
<body>
 <!--
        1.独占一行的标签：h1~h6,div
        2.在一行内显示的标签：span a
    -->

    <div class="top">
        <div class="container">
            <div class="top-info">
                <a href="#">小米商城</a>
                <span class="sep">|</span>
                <a href="#">loT</a>
                 <span class="sep">|</span>
                <a href="#">云服务</a>
                 <span class="sep">|</span>
                <a href="#">金融</a>
                 <span class="sep">|</span>
                <a href="#">有品</a>
                 <span class="sep">|</span>
                <a href="#">小爱开放平台</a>
                 <span class="sep">|</span>
                <a href="#">政企服务</a>
            </div>

            <div class="top-cart">购物车</div>
            <div class="top-login">
                <a href="#">登陆</a>
                <span class="sep">|</span>
                <a href="#">注册</a>
                <span class="sep">|</span>
                <a href="#">消息通知</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container">
            <ul>
                <li class="item">1</li>
                <li class="item">2</li>
                <li class="item">3</li>
                <li class="item">4</li>
                <!--内墙法：在最后浮动的元素的后面加一个空的块级标签 设置该标签的属性clear:both;-->
                <li class="clearfix"></li>
            </ul>



        </div>
    </div>
    <!--<div class="uuu"></div>-->
    <!--<span class="ttt">个哈哈哈哈</span>-->

</body>
</html>
7. 伪元素清除法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html{
            font-size: 14px;
        }
        body,ul{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .top{
             100%;
            height: 40px;
            background-color: #333;
            line-height: 40px;
            /*color: #b0b0b0;*/
        }
        .container{
             1226px;
            height: 100%;
            /*两个值： 上下  左右*/
            /*三个值： 上 左右 下*/
            /*四个值： 上 右 下 左*/
            /*一个值： */
            margin: 0 auto;
        }
        /*高级选择器 后代选择器*/
        .top a{
            color: #b0b0b0;
        }
        .top .sep{
            color: #424242;
            margin: 0 6px;
        }
        .top-info{
            float:left;
        }
        .top-cart{
            float: right;
            color: red;
        }
        .top-login{
            float:right;
            margin-right: 20px;
             200px;
            height: 40px;
        }
        .content {
             100%;
        }
        .content ul{
            overflow: hidden;
        }
        .content ul .item{
            float: left;
             25%;
            height: 300px;
            background-color: grey;
        }
        .uuu{
             100px;
            height: 400px;
            background-color: red;
        }
        .clearfix1:after{
            content:'.';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
        }



    </style>
</head>
<body>


    <div class="top">
        <div class="container">
            <div class="top-info">
                <a href="#">小米商城</a>
                <span class="sep">|</span>
                <a href="#">loT</a>
                 <span class="sep">|</span>
                <a href="#">云服务</a>
                 <span class="sep">|</span>
                <a href="#">金融</a>
                 <span class="sep">|</span>
                <a href="#">有品</a>
                 <span class="sep">|</span>
                <a href="#">小爱开放平台</a>
                 <span class="sep">|</span>
                <a href="#">政企服务</a>
            </div>

            <div class="top-cart">购物车</div>
            <div class="top-login">
                <a href="#">登陆</a>
                <span class="sep">|</span>
                <a href="#">注册</a>
                <span class="sep">|</span>
                <a href="#">消息通知</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container">
            <ul class="clearfix">
                <li class="item">1</li>
                <li class="item">2</li>
                <li class="item">3</li>
                <li class="item">4</li>

            </ul>



        </div>
    </div>
    <!--<div class="uuu"></div>-->
    <!--<span class="ttt">个哈哈哈哈</span>-->

</body>
</html>
8.计算盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
             180px;
            height: 180px;
            background-color: green;
            /*padding: 20px;*/
            padding-top: 20px;
            padding-left: 20px;
            /*border: 1px double red;*/
            /*如果保持盒模型不变，加padding，就要减内容的宽高*/
            border-radius: 5px ;
            /*margin垂直方向会出现塌陷问题，避免问题的问题只设置一个标准文档流的盒子的垂直方向的margin*/
            margin-bottom: 100px;

            /*盒子的宽度= 内容的宽度+ 2*padding + 2*border*/
        }
        .box2{
             100px;
            height: 100px;
            background-color: yellow;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box">alex</div>
    <div class="box2">wusir</div>
</body>
</html>
9. 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
https://www.baidu.com/s?wd=%E8%B7%AF%E9%A3%9E%E5%AD%A6%E5gB6Wq%2F50ARfE%2BYyM
https://www.baidu.com/s?wd=%E8%B7%AF%E9%A3%9E%E5%AD%A6%E5%9F%8E


server
bind(127.0.0.1,8080)
http://127.0.0.1:8080



-->

<form action="https://www.baidu.com/s"  ="get">
    <input type="text" name="wd" value="路飞学城">
    <br>
    <input type="submit">

</form>

</body>
</html>

查看全文

相关阅读:
大约PCA算法学习总结
 内部硬盘的硬件结构和工作原理进行了详细解释
 DWZ使用注意事项
 cocos2d-x 在XML分析和数据存储
 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详细的说明
 hdu 1114 Piggy-Bank
getResources()方法
 人机博弈-吃跳棋游戏（三）代移动
 Oracle 11g client安装和配置。
的微信公众号开发图灵机器人接口允许调用自己的微通道成为一个智能机器人

原文地址：https://www.cnblogs.com/junyingwang/p/9488870.html