html、css实现简单的广告

最新推荐文章于 2023-07-13 22:16:09 发布

jay编程

最新推荐文章于 2023-07-13 22:16:09 发布

阅读量2k

点赞数 1

分类专栏： javaWeb # html # css

本文链接：https://blog.csdn.net/weixin_45986454/article/details/106549000

版权

javaWeb 同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

html

16 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

标题：html、css实现简单的广告

一、思路

确定一个总的格局，写好如下代码后，再写css

 <div class="outer">
		       <div class="title">
		       		 <a href="#">我的主页</a>
		          <h3>开学时间 </h3>
		       </div>
		       <div class="content">
		          <h3><a href="#">数据结构+html+css</a></h3>
		          <ul>
		             <li>
		                <a href="#">开学时间：<span class="red">2020-06-06</span></a>
		           		   <a class="right" href="#"><span class="red">预约报名</span></a>
		             </li>
		             		             <li>
		                <a href="#">开学时间：<span class="red">2020-06-06</span></a>
		           		   <a class="right" href="#"><span class="red">不开学</span></a>
		             </li>
		             		             <li>
		                <a href="#">开学时间：2020-06-06</a>
		           		   <a class="right" href="#">开学</a>
		             </li>
		             		             <li>
		                <a href="#">开学时间：2020-06-06</a>
		           		   <a class="right" href="#">开学</a>
		             </li>
		             		             <li>
		                <a href="#">开学时间：2020-06-06</a>
		           		   <a class="right" href="#">开学</a>
		             </li>
		          </ul>
		          <h3><a href="#">javascript+jquery+ajax</a></h3>
		          <ul>
		             <li>
		                <a href="#">开学时间：<span class="red">2020-06-06</span></a>
		           		   <a class="right" href="#"><span class="red">预约报名</span></a>
		             </li>
		             <li>
		                <a href="#">开学时间：2020-06-06</a>
		           		   <a class="right" href="#">不开学</a>
		             </li>
		             <li>
		                <a href="#">开学时间：2020-06-06</a>
		           		   <a class="right" href="#">开学</a>
		             </li>
		             <li>
		                <a href="#">开学时间：2020-06-067</a>
		           		   <a class="right" href="#">开学</a>
		             </li>
		          </ul>
		          <h3><a href="#">bootStrap+materialize</a></h3>
		          <ul class="no-border">
		             <li>
		                <a href="#">开学时间：<span class="red">2020-06-06</span></a>
		           		   <a class="right" href="#"><span class="red">预约报名</span></a>
		             </li>
		             		             <li>
		                <a href="#">开学时间：2020-06-06</a>
		           		   <a class="right" href="#">不开学</a>
		             </li>
		             </li>
		          </ul>
		       </div>
		    </div>

在这里插入图片描述
二、注意：
*font:12px/1 宋体; /* 设置字体大小，行距，宋体-->黑色 font而不是font-size */

*width:100%;/* 若未设置，则自己设置padding时，不能auto的去调整，来适应outer */

*/*a为内联元素不能设置垂直外间距*/ /*margin-top:5px; */

`margin-top:14px;/ 为什么不行呢？可以了，width:100%*/

完整代码如下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			一个小广告终极版
		</title>	
		<style type="text/css">
		     *{
		        margin:0;
		        padding:0;
		     }
		     ul{
		        list-style:none;
		     }
		     body{
		         font:12px/1 宋体; /* 设置字体大小，行距，宋体-->黑色   font而不是font-size */
		     }
		     
		     
		     .outer{
		         width:300px;
		         /* height:473px;
		         background-color:orange; */
		         
		         
		         /*设置广告的位置，居中，离上面50px*/
		         margin:25px auto;/* 50px */
		     }
		     
		     .title{
		         /*设置宽度*/
		         width:100%;
		         /*设置高度*/
		         height:36px;
		         /*设置上边距*/
		         border-top:2px green solid;
		         /*设置背景*/
                 background-color:rgb(243,245,242);
	          /*设置一个内边距*/
	           padding:5px 5px;
	           /*设置行距*/
	           line-height:36px;
		     }

       .title a{
           float:right;
           color:red;
       }
       
       .content{
           width:100%;/* 若未设置，则自己设置padding时，不能auto的去调整，来适应outer */
           
           
           background-color:white;
           padding:0 5px;
           border:1px rgb(223,224,220) solid;
       }
       .content a{
           /*为超链接设置颜色*/
           color:black;
           /*去掉下划线*/
           text-decoration:none;
           
           /*a为内联元素 不能设置垂直外间距*/
          /*margin-top:5px; */
       }
       .content li{
           margin-bottom:15px;
       }
       .content h3{
           margin-top:14px;/* 为什么不行呢？  可以了，width:100%*/
           margin-bottom:16px;
       }
       /*设置特殊的字体颜色*/
       .content .red{
           color:red;
           font-weight:bold;
       }
       /*超链接设置向右移         可以到上一行，因为上一行是内联元素*/
       .content .right{
           float:right;
       }
       .content ul{
           list-style:none;/* 细心 */
           
           
           border-bottom:2px rgb(228,229,227) dashed;
       }
       .content .no-border{
           border:none;
       }
       
       .content a:hover{
           color:purple;
           text-decoration:underline;
       }

        
	   </style>
					
	</head>
		<body>
		    <div class="outer">
		       <div class="title">
		       		 <a href="#">我的主页</a>
		          <h3>开学时间 </h3>
		       </div>
		       <div class="content">
		          <h3><a href="#">数据结构+html+css</a></h3>
		          <ul>
		             <li>
		                <a href="#">开学时间：<span class="red">2020-06-06</span></a>
		           		   <a class="right" href="#"><span class="red">预约报名</span></a>
		             </li>
		             		             <li>
		                <a href="#">开学时间：<span class="red">2020-06-06</span></a>
		           		   <a class="right" href="#"><span class="red">不开学</span></a>
		             </li>
		             		             <li>
		                <a href="#">开学时间：2020-06-06</a>
		           		   <a class="right" href="#">开学</a>
		             </li>
		             		             <li>
		                <a href="#">开学时间：2020-06-06</a>
		           		   <a class="right" href="#">开学</a>
		             </li>
		             		             <li>
		                <a href="#">开学时间：2020-06-06</a>
		           		   <a class="right" href="#">开学</a>
		             </li>
		          </ul>
		          <h3><a href="#">javascript+jquery+ajax</a></h3>
		          <ul>
		             <li>
		                <a href="#">开学时间：<span class="red">2020-06-06</span></a>
		           		   <a class="right" href="#"><span class="red">预约报名</span></a>
		             </li>
		             <li>
		                <a href="#">开学时间：2020-06-06</a>
		           		   <a class="right" href="#">不开学</a>
		             </li>
		             <li>
		                <a href="#">开学时间：2020-06-06</a>
		           		   <a class="right" href="#">开学</a>
		             </li>
		             <li>
		                <a href="#">开学时间：2020-06-067</a>
		           		   <a class="right" href="#">开学</a>
		             </li>
		          </ul>
		          <h3><a href="#">bootStrap+materialize</a></h3>
		          <ul class="no-border">
		             <li>
		                <a href="#">开学时间：<span class="red">2020-06-06</span></a>
		           		   <a class="right" href="#"><span class="red">预约报名</span></a>
		             </li>
		             		             <li>
		                <a href="#">开学时间：2020-06-06</a>
		           		   <a class="right" href="#">不开学</a>
		             </li>
		             </li>
		          </ul>
		       </div>
		    </div>
		<img src="magazine-unlock-hi1057703.jpg" width="300"  alt="周杰伦"/><br/>			
			
		</body>
</html>

在这里插入图片描述

jay编程

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
html、css实现简单的广告

标题：html、css实现简单的广告一、思路确定一个总的格局，写好如下代码后，再写css <div class="outer"> <div class="title"> <a href="#">我的主页</a> <h3>开学时间 </h3> </div> <div class="content">
复制链接

扫一扫