特征布局4

html:

<!DOCTYPE html>
<html>
<head>
<title>特征布局4</title>
<meta name="generator" content="Bluefish 2.2.7" >
<meta name="author" content="dst" >
<meta name="date" content="2018-09-14T02:01:59+0800" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<link href="css/特征布局4.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="box0">
        <span class="newsHead">新闻列表</span>
        <div class="moreinfo"><a id="more" href="https://www.51test.com">更多&gt;&gt;</a></div>
        <ul>
            <li>
                <img src="img/dot.gif" alt="">
                <img src="img/webwxgetmsgimg" alt="">
                <a class="newsItem" href="#">国足止步八强赛,张玉宁掩面而泣</a>
                <span>2016-06-23</span>
            </li>
            <li>
                <img src="img/dot.gif" alt="">
                <img src="img/webwxgetmsgimg" alt="">
                <a class="newsItem" href="#">国足止步八强赛,张玉宁掩面而泣</a>
                <span>2016-06-23</span>
            </li>
            <li>
                <img src="img/dot.gif" alt="">
                <img src="img/webwxgetmsgimg" alt="">
                <a class="newsItem" href="#">国足止步八强赛,张玉宁掩面而泣</a>
                <span>2016-06-23</span>
            </li>
            <li>
                <img src="img/dot.gif" alt="">
                <img src="img/webwxgetmsgimg" alt="">
                <a class="newsItem" href="#">国足止步八强赛,张玉宁掩面而泣</a>
                <span>2016-06-23</span>
            </li>
            <li>
                <img src="img/dot.gif" alt="">
                <img src="img/webwxgetmsgimg" alt="">
                <a class="newsItem" href="#">国足止步八强赛,张玉宁掩面而泣</a>
                <span>2016-06-23</span>
            </li>
            <li>
                <img src="img/dot.gif" alt="">
                <img src="img/webwxgetmsgimg" alt="">
                <a class="newsItem" href="#">国足止步八强赛,张玉宁掩面而泣</a>
                <span>2016-06-23</span>
            </li>
        </ul>

    </div>
</body>
</html>

css:

*{
    padding: 0px;
    margin: 0px;
}
.box0{
    margin: 100px auto;
    width: 600px;
    height: 290px;
    border: 1px solid gray;
    position: relative;
}
.newsHead{
    display: inline-block;
    width: 100px;
    height: 50px;
    margin-left: 20px;
    text-align: center;
    font: 18px 雅黑;
    color: black;
    line-height: 50px;
    border-bottom: red 2px solid;
    float: left;
}
.moreinfo{
    display: inline-block;
    width: 460px;
    height: 50px;
    margin-right: 20px;
    text-align: right;
    line-height: 50px;
    border-bottom: gray 1px solid;
    float: left;
}
ul{
    display: block;
    width: 560px;
    height: 238px;
    margin: 0px 20px;
    position: absolute;
    top: 52px;
}
li{
    width: 100%;
    height: 38px;
    list-style: none;
    line-height: 38px;
    float: left;
    border-bottom: 0.1px solid #eee;
}
img{
    vertical-align: middle;
}
a{
    text-decoration: none;
}
span{
    float: right;
}
#more{
    color: gray;
}
.newsItem{
    display: inline-block;
    list-style: none;
    font: 14px 雅黑;
    color: black;
}
a:hover, #more:hover{
    color: red;
}

效果图:


特征布局4.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • <!DOCTYPE html> *{margin: 0;padding: 0;}.outer{width...
    小袋鼠cf阅读 201评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,759评论 1 45
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,344评论 2 66
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,019评论 3 119
  • 姥姥,你走了42天了…… 我连最后一眼都没能看到! 每到周六,我就会浑身一惊!又一个星期过去了,总想着好像你没走,...
    我是大温阅读 154评论 0 0