CSS阶段性练习1

最新推荐文章于 2019-10-27 07:47:39 发布

酷爱WAF哈狗帮

最新推荐文章于 2019-10-27 07:47:39 发布

阅读量143

点赞数

分类专栏： JavaWeb前端

本文链接：https://blog.csdn.net/HuashirenYty/article/details/102532555

版权

JavaWeb前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>CSS阶段性练习1</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<style type="text/css">
		html body{
            font-size: 15px;
        }
		.content{
			width: 600px;
			margin: 0 auto;
		}
		.news{
            height: 21px;
            line-height: 21px;
 
        }
        .news span{
            margin-left: 2px;
        }
        .newsright{
            float: right;
        }
        .newsimg{
            display: inline-block;
            vertical-align: middle;
        }
		.x{
			float: right;
		}
		.titleimg{
            height: 40px;
            float: left;
        }
        .title{
            height: 40px;
            line-height: 8px;
            margin-left: 56px;
        }
		.attact{
			color: #87CEFA;
		}
		.talk{
			background-color: #ECF5FF;
			width: 50px;
			height: 20px;
			border-radius: 5px; 
			text-align: center;
			line-height: 20px;
			float: left;
			margin-left: -6px;
		}
		.author{
			height: 30px;
			margin-left: 15px;
		}
		.text{
			 height: 130px;
			margin-left: 10px; 
		}
		.xianweijingimg{
			float: left;
		}
	</style>
  </head>
  
  <body>
      <div class="content">
    			<div class="news">
      			<img alt="" src="img/1.png" class="newsimg">
      			<span style="font-weight: bold;">最新动态</span>
      			<div class="newsright">
      				<img alt="" src="img/2.png" class="optionimg newsimg">
      				<span class="option">设置</span>
      			</div>	
      		</div>
      		<hr>
      		<div class="main">
      			<div>
      				<div class="titleimg">
      					<img alt="" src="img/4.png">
      				</div>
      				<div class="title">
      					<img alt="" src="img/3.png" class="x">
      					<p>热门回答，来自 机械 <span class="attact">关注话题
</span></p>
						<p style="color: #66b3ff; font-weight: bold; ">人类史上
令人叹为观止的极限精度制造成果有哪些？</p>
      				</div>
      			</div>
      			<div style="margin-top: 10px;">
      				<div class="talk">66666</div>
      				<div style="float: left;">
      					<div class="author">
      						<span style="font-weight: bold;">Vincent Fu,&nbsp;</span>
      						<span>Materials Science,&nbsp;PhD</span>
      					</div>
      					<div class="text">
      						<div class="xianweijingimg">
      							<img alt="" src="img/6.png">
      						</div>
      						<div style="float: left; margin-left: 20px; 
      						width: 320px; line-height: 23px;">
	      						<span>说到精度，就不得不提在材料学中最重要的一个方面：表征。
	      						要想研究一种材料的性能，握在手里把玩时远远不够，
	      						就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，
	      						而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...
	      						</span>
	      						<span style="color: #66b3ff;">显示全部</span>
      						</div>
      					</div>
	    					 <div style="width: 400px; height: 30px; margin-left: 20px; color: #e0e0e0;">
	                        <img src="img/7.png" alt="">
	                        <span>关注问题</span>&nbsp;
	                        <img src="img/8.png" alt="">
	                        <span>867条评论</span>&nbsp;
	                        <img src="img/9.png" alt="">
	                        <span>作者保留权利</span>
	                    </div>
      				</div>
      			</div>
	                    
      		</div>
      		<hr>
      </div>
  </body>
</html>

酷爱WAF哈狗帮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS阶段性练习1

<!DOCTYPE html><html> <head> <title>CSS阶段性练习1</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" cont...
复制链接

扫一扫