Web front-end experiment 2

Language 2023-08-19 01:35:10 views: null

insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">

.ul1{
    
    
    height:90%;width:70%;
    position:fixed;
    top:0;right:0;bottom:0;left:0;
    margin:auto;
}
img{
    
    
    height: 120px;
}
li{
    
    

    overflow: hidden;
    border-top:2px solid #ccc;
    width: 860px;
    height: 130px;
    padding-top: 15px;
    padding-bottom: 30px;
}
li:hover{
    
    
    background-color: #F8F8F8;
}
div{
    
    
    display: flex;

}
.p1{
    
    

    display: block;
    margin-left: 30px;
}
.p2{
    
    
    font:20px 黑体;
}
.tag{
    
    
    font:16px;
    color:#cccc00;
    
}
.tag2{
    
    
    display:inline-block;
    background-color: #eee;
    color:#999;
    font-size:14px;
    margin:3px;
    text-align: center;
}
span{
    
    
    color:#999;
}
.p3{
    
    
    border:1px solid #eee;
    border-radius: 25px;

}
</style>
<body >
    <ul class="ul1" align="center">
        <li>
            <div>
                
                <img src="images/4.jpg">
                <div class="p1">
                    <p class="p2"> 不只有看肤色挑唇色，选对口红衣服更美</p>
                    <p>
                        <!-- span标签用于列出一个单独的样式，且不会造成换行 -->
                    <span class="tag">
                        标签
                    </span>
                    <span class="tag2">
                        唇膏
                    </span>
                    <span class="tag2">
                        衣服
                    </span>
                    <span class="tag2">
                        粉色
                    </span>
                    <span class="tag2">
                        化妆
                    </span>
                    <span class="tag2">
                        美容美体
                    </span>
                    </p>
                    <span class="p3">
                       悦己self
                    </span>
                    <span>
                        2016-10-18
                    </span>
                </div>

            </div>

        </li>

        <li >
            <div>
                
                <img src="images/5.jpg">
                <div class="p1">
                    <p class="p2"> 学画红唇妆 让你的女王范分分钟秒杀路人</p>
                    <p>
                    <span class="tag">
                        标签
                    </span>
                    <span class="tag2">
                        唇膏
                    </span>
                    <span class="tag2">
                        衣服
                    </span>
                    <span class="tag2">
                        粉色
                    </span>
                    <span class="tag2">
                        化妆
                    </span>
                    <span class="tag2">
                        美容美体
                    </span>
                    </p>
                    <span class="p3">
                       毛戈平形象艺术学校
                    </span>
                    <span>
                        2016-10-18
                    </span>
                </div>

            </div>

        </li>

        <li >
            <div>
                
                <img src="images/6.jpg">
                <div class="p1">
                    <p class="p2"> 学画红唇妆 让你的女王范分分钟秒杀路人</p>
                    <p>
                    <span class="tag">
                        标签
                    </span>
                    <span class="tag2">
                        美容美体
                    </span>
                    </p>
                    <span class="p3">
                       八公举
                    </span>
                    <span>
                        2016-10-18
                    </span>
                </div>

            </div>

        </li>
    </ul>

</body>
</html>

insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
    
    
        height:90%;width:90%;
    position:fixed;
    top:0;right:0;bottom:0;left:0;
    margin:auto;
    }
.div_title{
    
    
    padding-top: 10px;
    padding-bottom: 10px;
    border:1px solid;
    border-radius: 5px;
    border-color:darkgrey;
    display:block;
    background-color: darkgrey;

}
span{
    
    
    text-decoration: underline;
    margin-left: 85px;
    font-size: 20px;
    color: azure;

}
span:hover{
    
    
    color:red;
}
p{
    
    
    font-weight: bolder;
    font-size:30px;
}
.news{
    
    
 
    margin-right: 100px;
display:inline-block;
}
li{
    
    
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
    font:15px 黑体;
}
.massage{
    
    
   margin-right: 100px;
}
.date{
    
    
    float:right;
}
.end{
    
    
    position: fixed;
    width: 80%;
    text-align: center;
}
.end_span{
    
    
    text-decoration: underline;
    font:15px 黑体;
}
.div_body{
    
    
margin-bottom: 300px;
}
</style>
<body>
    <div class="div_title">
          <span>首页</span> <span>新闻</span> <span>体育</span> <span>娱乐</span> <span>财经</span><span>科技</span>  <span>手机</span> <span>数码</span> 
        </div>
        <div class="div_body">
    <div class="news">
        <p>
            娱乐新闻
        </p>
        <ul>
            <li>
                <a class="massage"> 141414141414</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 《碟中谍5》爆外景地花絮</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 灾难发生后该不该禁播娱乐节目</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 414141414141414</a><a class="date">2018-10-1</a>
            </li>
        </ul>
    </div>
    <div class="news">
        <p>
            军事新闻
        </p>
        <ul>
            <li>
                <a class="massage"> 4141414141414</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 414141414</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 4141444444411414</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 414111111111111</a><a class="date">2018-10-1</a>
            </li>
        </ul>
    </div>

    <div class="news">
        <p>
            数码新闻
        </p>
        <ul>
            <li>
                <a class="massage"> 1414444444444444</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 平板电脑五年走到市场拐点</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 苹果邀请函解密Hint有新翻译</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> IDF2018英特尔谷歌联手</a><a class="date">2018-10-1</a>
            </li>
        </ul>
    </div>
    <div class="news">
        <p>
            手机新闻
        </p>
        <ul>
            <li>
                <a class="massage"> 超大运行手机内存推建</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 国产旗舰手机盘点</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 西门子归来  首款智能机</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 骗子植入手机木马十大骗术</a><a class="date">2018-10-1</a>
            </li>
        </ul>
    </div>
    <div class="end">
        <a class="end_span">关于我们</a> <a class="end_span">联系我们</a>
    </div>
</div>
 
</body>
</html>

insert image description here

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
    
     text-align:center} 
    .div{
    
     margin:0 auto; width:400px; height:100px; border:1px solid #F00} 

    .div_main {
    
    
        width: 248px;
        height: 220px;
        padding-top: 30px;
        padding-bottom: 30px;
        background-color: #F5EAE8;
        padding-left: 40px;
        padding-right: 40px;
        border: 1px solid #F5EAE8;
    }

    .div_website {
    
    
        height: 145px;
        width: 330px;
        background-color: #F5EAE8;
        border-top: 1px solid #ddd;
        text-align: center;
        padding-top: 10px;
    }

    .input1 {
    
    
        background-color: #F5EAE8;
        width: 250px;
        height: 38px;
        border: 1px solid #ccc;
        margin-bottom: 30px;
        color: #ccc;
        font-size: 15px;
        background-image: url("images/zhanghao.jpg");
        background-repeat: no-repeat;
        text-indent: 50px;
        background-position: left;
    }

    .input2 {
    
    
        background-color: #F5EAE8;
        width: 250px;
        height: 38px;
        border: 1px solid #ccc;
        margin-bottom: 30px;
        color: #ccc;
        font-size: 15px;
        background-image: url("images/mima.jpg");
        background-repeat: no-repeat;
        text-indent: 50px;
        background-position: left;
    }

    div_e {
    
    
        display: inline-block;
    }

    span {
    
    
        font-size: 12px;
        color: darkgrey;
    }

    label {
    
    
        font-size: 15px;
    }

    button {
    
    
        width: 255px;
        height: 44px;
        margin-top: 25px;
        margin-bottom: 25px;
        text-align: center;
        background-image: url("images/but.jpg");
    }
</style>
<body>
        <div class="div_main">
            <input class="input1" placeholder="用户名/邮箱地址/手机号" style="position:static;">
            <input class="input2" placeholder="填写密码" style="position:static;">
            <div class="div_e">
                <input type="checkbox"><label>记住密码</label>
                <span>欢迎注册</span>
                <span>忘记密码</span>
            </div>
            <div>
                <button>登录</button>
            </div>
        </div>
        <div class="div_website">
            <div class="div_e">
                <a>合作账号登录:</a>
                <img src="images/weixin.png">
                <img src="images/qqlogin.png">
                <img src="images/taobao.png">
            </div>
        </div>
</body>

</html>

Guess you like

Origin blog.csdn.net/ailaohuyou211/article/details/130306916
Recommended
Ranking
ElasticSearch-- data modeling best practices
Permission Maintenance - Shadow User Backdoor
Refactor the code using MVP mode
Quantitative investment-fundamental model-PVC multi-factor model
Spark Big Data Processing Lecture Notes 3.2 Mastering RDD Operators
Blazor page components (2)
Erlernen von Kenntnissen zur Android-Entwicklung – Kodierung, Verschlüsselung, Hash, Serialisierung und Zeichensätze
About Qi high in JAVA study notes SORM summary detailed personal explanation
Will you calculate the accuracy of the rope displacement sensor in the measurement?
OPENJTAG debugging learning (3): debugging using the gdb command line
Daily
More
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)

Code World

© 2018 codetd.com