返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: dw入门 >

css设置新闻栏目和导航菜单,多级菜单

2020-04-21 文章标签: css 按钮 教程 浏览次数:

我们讲解下HTML5和CSS3,包含知识点CSS设置设计新闻栏目,设计导航菜单,设计多级菜单,这些都不需要借助javascript代码,纯css代码实现,有javascript兴趣的也可以看看jquery栏目。

HTML5教程

1.css设计新闻栏目css设计新闻栏目

<!doctype html>
<html>
<head>
<title></title>
<style>
body {/*网页基本属性*/
    font: 13px "黑体";/*字体样式*/
    background-color: #99CCFF;
}
p {/*新闻栏目的文本样式*/
    margin: 5px 0 0 5px; /*新闻栏目文字上下补白*/
    color: #3333FF;
    font-size: 15px;
    font-weight: bold;
}
p span { /*文字“more…”的显示样式*/
    color: #FF0000;
    float: right;/*右对齐*/
}
div {/*每一个新闻栏目块的样式*/
    line-height: 16pt;  /*行间距*/
    width: 400px;/*块的宽度*/
    margin: 10px 0 0 10px;/*各个新闻块之间距离*/
}
.junshi {/*第一个栏目的样式*/
    border: 5px #FFcc00 dotted;/*边框样式*/
}
.caijing {/*第二个栏目的样式*/
    border: 2px #FF0000 dashed;
}
.yule {/*第三个栏目的样式*/
    border: 2px #ff33FF solid;
}
.junshi ul {/*第一个新闻块的列表样式*/
    margin-left: 40px;/*文字左侧离边框的距离*/
    list-style-type: upper-alpha;/*项目符号是大写字母*/
}
.caijing ol {/*第二个新闻块的列表样式*/
    margin-left: 40px;
    list-style-type: upper-roman;/*项目符号是大写罗马字母*/
}
.yule ul {/*第三个新闻块的列表样式*/
    margin-left: 40px;
    list-style-type: circle;/*项目符号是空心圆*/
}
li { /*li标签样式,也就是新闻标题样式*/
    margin: 5px 0 5px 0;/*每条新闻标题之间间隔*/
}
a { /*链接样式*/
    text-decoration: none;/*不显示下划线*/
    color: #000;
}
</style>
</head>
<body>
<div class="junshi">
    <p>军事新闻<span>more...</span></p>
    <ul>
        <li><a href="#">英高官称世界面临冷战威胁 不重视中俄将吃亏</a> </li>
        <li><a href="#">中没与俄一起否决涉叙提案 不想驳一国面子</a> </li>
        <li><a href="#">战斗群配置太差:俄航母编队还不如中国辽宁舰</a> </li>
        <li><a href="#">日将赋予自卫队新任务 海外用兵锁链再放松</a> </li>
    </ul>
</div>
<div class="caijing">
    <p>财经资讯<span>more...</span></p>
    <ol>
        <li><a href="#">东方资管公司正式挂牌 银监会杨家才建议改制不改向</a></li>
        <li><a href="#">发改委再对新能源标杆电价征意见 下调或是必然趋势</a></li>
        <li><a href="#">我国劳务税标准36年未作调整 起征点仍为800元</a></li>
        <li><a href="#">美财政部唱多人民币:中长期稳定 汇率应更透明</a></li>
    </ol>
</div>
<div class="yule">
    <p>娱乐资讯<span>more...</span></p>
    <ul>
        <li><a href="#">回家办证?范冰冰李晨现身烟台甜蜜牵手</a> </li>
        <li><a href="#">艾玛·斯通被曝与“蜘蛛侠”分手 粉丝惊叹:太可惜</a> </li>
        <li><a href="#">郑爽陪生病外婆散步 真是个孝顺的女孩子</a> </li>
        <li><a href="#">追星要理智!张继科呼吁:跟机追车得不偿失</a> </li>
    </ul>
</div>
</body>
</html>

2.css设计导航菜单css设计导航菜单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
dl {
    position: absolute;
    width: 460px;
    height: 170px;
    border: 10px solid #eee;
}
dd {
    margin: 0;
    width: 460px;
    height: 170px;
    overflow: hidden;
}
dt {
    position: absolute;
    right: 1px;
}
ul {
    margin: 0;
    padding: 0;
    width: 460px;
    height: 170px;
    list-style: none;
    border: 1px solid #ccc;
    background: #FF9999;
}
li {
    width: 405px;
    height: 27px;
    padding-left: 20px;
    font: 12px/27px "宋体", sans-serif;
    white-space: nowrap;
    overflow: hidden;
}
dt a {
    display: block;
    margin: 1px;
    width: 80px;
    height: 56px;
    text-align: center;
    font: 700 12px/55px "宋体", sans-serif;
    color: #fff;
    text-decoration: none;
    background: #666;
}
dt a:hover {
    background: orange;
}
dd a {
    text-decoration: none;
    line-height: 36px;
    color: #000;
}
</style>
</head>
<body>
<dl>
    <dt><a href="#a">军事新闻</a><a href="#b">财经资讯</a><a href="#c">娱乐资讯</a> </dt>
    <dd>
        <ul id="a">
            <li><a href="#">英高官称世界面临冷战威胁 不重视中俄将吃亏</a> </li>
            <li><a href="#">中没与俄一起否决涉叙提案 不想驳一国面子</a> </li>
            <li><a href="#">战斗群配置太差:俄航母编队还不如中国辽宁舰</a> </li>
            <li><a href="#">日将赋予自卫队新任务 海外用兵锁链再放松</a> </li>
            <li><a href="#">more...</a> </li>
        </ul>
        <ul id="b">
            <li><a href="#">东方资管公司正式挂牌 银监会杨家才建议改制不改向</a></li>
            <li><a href="#">发改委再对新能源标杆电价征意见 下调或是必然趋势</a></li>
            <li><a href="#">我国劳务税标准36年未作调整 起征点仍为800元</a></li>
            <li><a href="#">美财政部唱多人民币:中长期稳定 汇率应更透明</a></li>
            <li><a href="#">more...</a> </li>
        </ul>
        <ul id="c">
            <li><a href="#">回家办证?范冰冰李晨现身烟台甜蜜牵手</a> </li>
            <li><a href="#">艾玛·斯通被曝与“蜘蛛侠”分手 粉丝惊叹:太可惜</a> </li>
            <li><a href="#">郑爽陪生病外婆散步 真是个孝顺的女孩子</a> </li>
            <li><a href="#">追星要理智!张继科呼吁:跟机追车得不偿失</a> </li>
            <li><a href="#">more...</a> </li>
        </ul>
    </dd>
</dl>
</body>
</html>

3.CSS设计多级菜单CSS设计多级菜单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.menu {
    font-family: arial, sans-serif;
    width: 440px;
    margin: 0;
}
.menu ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.menu ul li {
    float: left;               /* 列表横向显示*/
    position: relative;
}
.menu ul li a, .menu ul li a:visited {
    display: block;
    text-align: center;
    text-decoration: none;
    width: 104px;
    height: 30px;
    color: #000;
    border: 1px solid #fff;
    border-width: 1px 1px 0 0;
    background: #5678ee;
    line-height: 30px;
    font-size: 14px;
}
.menu ul li ul {
    display: none;
}
.menu ul li:hover a {
    color: #fff;
}
.menu ul li:hover ul {
    display: block;
    position: absolute;
    top: 31px;
    left: 0;
    width: 105px;
}
.menu ul li:hover ul li a {
    display: block;
    background: #ff4321;
    color: #000;
}
.menu ul li:hover ul li a:hover {
    background: #dfc184;
    color: #000;
}
</style>
</head>
<body>
<div class="menu">
    <ul>
        <li><a href="#">文 件</a>
            <ul>
                <li><a href="#">打 开</a></li>
                <li><a href="#">保 存</a></li>
                <li><a href="#">新 建</a></li>
            </ul>
        </li>
        <li><a href="#">查 看</a>
            <ul>
                <li><a href="#">工具栏</a></li>
                <li><a href="#">标 尺</a></li>
                <li><a href="#">缩 放</a></li>
            </ul>
        </li>
        <li><a href="#">修 改</a>
            <ul>
                <li><a href="#">属 性</a></li>
                <li><a href="#">样 式</a></li>
            </ul>
        </li>
        <li><a href="#"> 窗 口</a>
            <ul>
                <li><a href="#">历史记录</a></li>
                <li><a href="#">颜 色</a></li>
                <li><a href="#">时间轴</a></li>
            </ul>
        </li>
    </ul>
    <div class="clear"> </div>
</div>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body, h3, ul {
    margin: 0;
    padding: 0;
}
h3 {
    width: 800px;
    height: 30px;
    margin: 20px auto 0 auto;
    font-size: 20px;
    text-indent: 10px;
    line-height: 30px;
    background: #E4E1D3;
    text-align: center;
}
h3 a {
    color: #c00;
    text-decoration: none;
}
h3 a:hover {
    color: #000;
}
ul {
    width: 774px;
    margin: 0 auto;
    padding-left: 20px;
    border: 3px solid #E4E1D3;
}
ul li {
    float: left;
    margin: 5px 10px 3px 0px;
    list-style-type: none;
}
ul li a {
    display: block;
    width: 370px;
    height: 175px;
    text-decoration: none;
}
ul li a img {
    width: 370px;
    height: 150px;
    border: 1px #000099 solid;
}
ul li a span {
    display: block;
    width: 370px;
    height: 23px;
    line-height: 20px;
    font-size: 14px;
    text-align: center;
    color: #333;
    cursor: hand;
    white-space: nowrap;
    overflow: hidden;
}
ul li a:hover span {
    color: #c00;
}
</style>
<body>
<h3><a href="#/">世界十大名车欣赏</a></h3>
<ul>
    <li> <a href="#"><img src="//freemuban.com/img/demo1.jpg" alt="1"><span>世界十大名车之一:恩佐.法拉利</span></a></li>
    <li> <a href="#"> <img src="//freemuban.com/img/demo2.jpg" alt="2"> <span>世界十大名车之二:兰博基尼</span></a></li>
    <li> <a href="#"> <img src="//freemuban.com/img/demo1.jpg" alt="3"> <span>世界十大名车之三:奔驰SLR</span></a></li>
    <li> <a href="#"> <img src="//freemuban.com/img/demo2.jpg" alt="4"> <span>世界十大名车之四: 布加迪.威龙</span></a></li>
    <li> <a href="#"> <img src="//freemuban.com/img/demo1.jpg" alt="5"> <span>世界十大名车之五:福特GT</span></a></li>
    <li> <a href="#"> <img src="//freemuban.com/img/demo2.jpg" alt="6"> <span>世界十大名车之六:克莱斯勒ME-Four-Twelve</span> </a></li>
    <li> <a href="#"> <img src="//freemuban.com/img/demo1.jpg" alt="6"> <span>世界十大名车之七:阿斯顿.马丁DB9</span> </a></li>
    <li> <a href="#"> <img src="//freemuban.com/img/demo2.jpg" alt="6"> <span>世界十大名车之八:保时捷CarreraGT</span> </a></li>
    <li> <a href="#"> <img src="//freemuban.com/img/demo1.jpg" alt="6"> <span>世界十大名车之九:宾利欧陆GT</span> </a></li>
    <li> <a href="#"> <img src="//freemuban.com/img/demo2.jpg" alt="6"> <span>世界十大名车之十:帕格尼—风之子</span> </a></li>
    <div style="clear:both;"></div>
</ul>
</body>
</html>

5.使用列表设计图文混排页面使用列表设计图文混排页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
* {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #000;
    list-style: none;
}
a {
    color: #03c;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
#container {
    width: 418px;
    margin: 30px auto;
    border: 1px solid #999;
}
.list_title {
    width: 418px;
    height: 32px;
    border-bottom: 1px solid #999;
    background: #f2f9fd;
    overflow: hidden;
}
.list_title h3 {
    float: left;
    width: 150px;
    line-height: 32px;
    text-indent: 15px;
}
.list_title h3 a {
    color: #c00;
}
.list_title h3 a:hover {
    color: #03c;
}
.list_title ul {
    float: right;
    width: 230px;
}
.list_title ul li {
    float: left;
    line-height: 32px;
    padding: 0 5px;
}
.list_title ul li a {
    font-size: 12px;
    color: #333;
}
.list_unit {
    float: left;
    width: 388px;
    margin-left: 15px;
    padding: 15px 0 8px 0;
    border-bottom: 1px dotted #9AC4E9;
}
.list_unit {
    display: inline;
}
.list_unit p {
    float: left;
    width: 154px;
}
.list_unit p a {
    display: block;
    border: 1px solid #03c;
}
.list_unit p a:hover {
    border: 1px solid #f00;
}
.list_unit span {
    display: block;
}
.list_unit span a {
    display: block;
    width: 154px;
    height: 22px;
    border: 0;
    line-height: 22px;
    text-align: center;
}
.list_unit span a:hover {
    border: 0;
    color: #c00;
}
.list_unit ul {
    float: right;
    width: 216px;
    margin-top: -5px;
}
.lit_unit ul li {
    float: left;
    width: 216px;
    line-height: 22px;
    color: #039;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.list_unit ul li a:hover {
    color: red;
}
#3 {
    border-width: 0;
}
.di {
    clear: both;
}
a img {
    border: none;
}
</style>
<body>
<div id="container">
    <div class="list_title">
        <h3><a href="#" title="图文混排">最新最快的财经资讯</a></h3>
        <ul>
            <li><a href="#">最新资讯</a></li>
            <li><a href="#">国际财经</a></li>
            <li><a href="#">汽车房产</a></li>
        </ul>
    </div>
    <div class="list_unit" id="l">
        <p> <a href="#"><img src="//freemuban.com/img/demo1.jpg"></a> <span><a href="#">最新资讯</a></span> </p>
        <ul>
            <li>·<a href="#">A股恐慌式跳水重挫3.68% 大盘跌回</a></li>
            <li>·<a href="#">股指缓慢企稳 黄金板块逆市上涨</a></li>
            <li>·<a href="#">港股后市堪忧 韩国股市暂停交易</a></li>
            <li>·<a href="#">中国万亿美债或面临缩水</a></li>
            <li>·<a href="#">日经指数收低</a></li>
            <li>·<a href="#">七国集团发联合声明称将保证金融</a></li>
            <li>·<a href="#">标普或再降美信用评级</a></li>
        </ul>
    </div>
    <div class="list_unit" id="2">
        <p> <a href="#"><img src="//freemuban.com/img/demo1.jpg"></a> <span><a href="#">国际财经</a></span> </p>
        <ul>
            <li>·<a href="#">埃及股市跌至两年来最低点 </a></li>
            <li>·<a href="#">默多克传媒帝国经济根基稳固</a></li>
            <li>·<a href="#">G7将商讨美国国债降级问题</a></li>
            <li>·<a href="#">贸易保护剑指“中国制造”</a></li>
            <li>·<a href="#">欧洲央行出手购入意西两国国债</a></li>
            <li>·<a href="#">以色列股市7日暴跌</a></li>
        </ul>
    </div>
    <div class="list_unit" id="3">
        <p> <a href="#"><img src="//freemuban.com/img/demo2.jpg"></a> <span><a href="#">汽车房产</a></span> </p>
        <ul>
            <li>·<a href="#">发改委称成品油价暂不具备下调条件</a></li>
            <li>·<a href="#">一汽-大众取缔二级经销商</a></li>
            <li>·<a href="#">英菲尼迪首款车M系</a></li>
            <li>·<a href="#">前7月北京豪宅成交逆市增两成</a></li>
            <li>·<a href="#">李嘉诚称继续看好内地楼市</a></li>
            <li>·<a href="#">调查显示50未限购城市外地人购房</a></li>
            <li>·<a href="#">首套房贷利率北京外资银行能打折</a></li>
        </ul>
    </div>
    <div class="di"></div>
</div>
</body>
</html>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。