图文组合练习

最新推荐文章于 2024-07-15 13:17:25 发布

江淼11

最新推荐文章于 2024-07-15 13:17:25 发布

阅读量566

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/m0_69422950/article/details/124202143

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

section{

width: 1500px;

overflow: hidden;

}

.item {

float: left;

width: 320px;

height: 700px;

background-color: #ffffff;

margin-top: 40px;

margin-left: 47px;

}

.san {

width: 320px;

border: 1px solid #efefef;

}

.pic {

width: 320px;

height: 440px;

background-size: 100% 100%;

overflow: hidden;

}

.pic p {

font-size: 36px;

height: 40px;

line-height: 40px;

color: white;

margin-left: 20px;

margin-top: 380px;

}

.item .looks {

background-color: #fbfbfb;

color: #ffb52a;

width: 300px;

font-size: 30px;

height: 70px;

line-height: 70px;

padding-left: 20px;

}

.item .yu {

background-color: #ffffff;

height: 78px;

font-size: 30px;

color: #999999;

line-height: 78px;

display: flex;

}

.left {

text-align: center;

flex: 1;

}

.right {

text-align: center;

flex: 1;

border-left: 1px dashed #999999;

}

.bottom{

width: 320px;

}

.time{

font-size: 32px;

height: 34px;

line-height: 34px;

color: #999999;

text-align: center;

margin-top: 22px;

}

</style>

</head>

<body>

</div>

<p class="yu">z

</p>

</div>

</div>

<p>芭比公主奇遇记</p>

</div>

</p>

</div>

</div>

</div>

</p>

</div>

</div>

<p>长津湖之水门桥</p>

</div>

</p>

</div>

</div>

</section>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding: 0;

margin: 0;

}

section{

width: 1000px;

overflow: hidden;

background-color: #f5f6f6;

margin: 0 auto;

}

.item{

width:206px ;

height: 268px;

background-color: #ffffff;

float: left;

text-align: center;

margin:10px 10px 10px 30px;

}

.item .pic img{

width: 48px;

height: 48px;

margin-top: 26px;

margin-bottom: 16px;

border-radius: 24px;

}

.item .title {

color: #000000;

font-size: 20px;

margin-bottom: 8px;

}

.item .content span{

font-size: 16px;

color: #767676;

height: 40px;

float: left;

overflow: hidden;

white-space: normal;

margin: 0 8px 16px 8px;

}

.item .bottom{

font-size: 16px;

color: #767676;

margin-bottom: 14px;

}

.item .bo{

display: inline-block;

text-decoration: none;

width: 88px;

height: 30px;

border: 2px solid #3fb27e;

font-size: 13px;

color: #3fb27e;

line-height: 30px;

}

</style>

</head>

<body>

</div>

<p class="title">干货考研经验</p>

<span> 经验超市app为大家整理最干货的考研经验...</span>

</p>

</div>

</div>

<p class="title">行走的审计汪</p>

<span> 让设计变得简单，有趣。</span>

</p>

</div>

</div>

<p class="title">TD北美留学进化论</p>

<span> TestDaily致力于最负责任的北美考试咨询和干货的分...</span>

</p>

</div>

</div>

<p class="title">王喆的机器学习笔记</p>

<span> 关注推荐系统、计算广告等机器学习领域业界前沿</span>

</p>

</div>

</section>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding: 0;

margin: 0;

}

section{

width: 860px;

height: 700px;

overflow: hidden;

background-color: #f5f5f5;

margin: 0 auto;

}

.item{

width: 252px;

height: 324px;

background-color: #ffffff;

float: left;

text-align: center;

margin: 10px 10px 10px 20px;

}

img{

width: 200px;

height: 200px;

margin-bottom: 20px;

}

.name{

color: #252525;

font-size: 20px;

margin-bottom:8px ;

}

.content{

color: #c2c2c2;

font-size: 16px;

margin-bottom: 8px;

}

.price{

color: #ff6d19;

font-size: 20px;

}

</style>

</head>

<body>

<p class="name">Xiaom 12 Pro</p>

<p class="content">全新骁龙8 | 2k AMOLED屏幕</p>

</div>

<p class="name">Xiaomi 12 </p>

</div>

<p class="name">Xiaomi 12X</p>

</div>

<p class="name">Redmi Note 11 Pro系列</p>

<p class="content">三星AMOLED高刷屏</p>

</div>

<p class="name">Redmi Note 11 5G</p>

<p class="content">5000mAh大电量</p>

</div>

<p class="name">Redmi Note 11 4G</p>

<p class="content">5000mAh大电量</p>

</div>

</section>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

ul{

width: 700px;

height:750px ;

}

.selected{

height: 122px;

}

img{

width: 92px;

height: 92px;

border-radius: 46px;

border:1px solid #eaeaea ;

float: left;

margin-left: 20px;

margin-top: 15px;

}

.title{

color: #333333;

font-size: 36px;

height: 40px;

line-height: 40px;

margin-top: 20px;

margin-left: 30px;

float: left;

}

.content{

color: #969696;

font-size: 32px;

line-height: 40px;

height: 40px;

float: left;

margin-top: 8px;

margin-left: 30px;

}

text-decoration: none;

float: left;

color:#3dbf40 ;

font-size: 36px;

margin-left: 20px;

margin-top: 20px;

margin-right:20px ;

}

div{

width: 420px;

height: 80px;

float: left;

}

</style>

</head>

<body>

<ul>

<div>

</div>

</li>

<div>

<p class="title">简书钻首席小管家</p>

</div>

</li>

<div>

</div>

</li>

<div>

<p class="title">Hobbit霍比特人</p>

</div>

</li>

<div>

</div>

</li>

</ul>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.item {

width: 900px;

height: 400px;

display: block;

margin: 0 auto;

}

.item .left {

float: left;

display: block;

font-size: 18px;

color: #006600;

height: 20px;

}

.item .right {

display: block;

float: left;

font-size: 15px;

color: #5a8bb4;

}

.item .pic {

width: 100px;

height: 140px;

background-size: 100% 100%;

overflow: hidden;

margin: 0 auto;

}

.item .box {

width: 100px;

height: 280px;

/* background-color: aqua; */

text-align: center;

float: left;

margin-right: 64px;

}

.item .box .title {

font-size: 16px;

height: 20px;

line-height: 20px;

margin: 10px 0;

color: #101010;

}

.item .box .bottom {

font-size: 14px;

margin: 30px 12px;

color: #dbdbdb;

}

.all .box:nth-of-type(5n){

margin-right: 0;

}

.all1 {

overflow: hidden;

height: 44px;

line-height: 44px;

margin-left: 72px;

}

.all {

overflow: hidden;

margin: 0 72px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

江淼11

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图文组合练习

<!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"> <titl...
复制链接

扫一扫