CSS图片居中和导航栏居中实例

最新推荐文章于 2024-04-04 05:20:07 发布

小高写BUG

最新推荐文章于 2024-04-04 05:20:07 发布

阅读量1.6k

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/gao1213977085/article/details/105855210

版权

首先是导航栏居中

        .three {
        	width: 1000px;
        	height: 60px;
        	border-top: 1px solid #d6d6d6;
        	margin:0 auto; /*居中*/       	
        }

然后是图片居中

        .four {
        	width: 1200px;
        	height: 367px;
        	margin:0 auto;
        }

网页的实战

<!DOCTYPE html>
<html>
<head>
	<title>s</title>
	<style>
		* {
            padding: 0;
            margin: 0;/*因为某些元素如 body、 li、 p 这是有默认的margin值，这样就不方便我度们精确控制*/
        }/*这东西叫“通配符”用来匹配页面上所有元素。*/
        ul,li {
            list-style: none;/*设置列表项目样式为不使用项目符号。*/
        }
        a {
            text-decoration: none;
            color: black;
        }
        .zero {
        width: 1000px;
        height: 100px;
        border-top: 5px solid #284c7e;
        margin: 0 auto;
        background: url(image/body_bg.gif);
        background-repeat:repeat-x;/*背景图像将在水平方向重复。*/

        }
        .one {float: left;}
        .one > img {margin-top: 10px;}
        .two {
        	float: right;/*图像会浮动到右侧*/
        	width: 200px;
        	height: 31px;
        	text-indent: 12px;/*text-indent 属性规定文本块中首行文本的缩进。*/
        	margin-top: 30px;
        	margin-right: 30px;

        }
        .seach {width: 194px;}
        li{
        	width: 120px;
        	text-align: center;
            line-height: 3em;
        	display: inline-block;
        }
        li:hover {           
        	background-color: rgb(0,180,255);
        	
        }  
        li>a:hover {color: #ffffff;}    
        .three {
        	width: 1000px;
        	height: 60px;
        	border-top: 1px solid #d6d6d6;
        	margin:0 auto; /*居中*/       	
        }
        .four {
        	width: 1200px;
        	height: 367px;
        	margin:0 auto;
        }

        
	</style>
</head>
<body>
	<div class="biaotou">
		
	</div>
	<div class="zero">
	      <div class="one">
      	      <img src="image/logo.png">
          </div>
          <div class="two">
      	     
      		     <a href="#">旧版网页 English Version</a>
      		     <input class="seach" type="" name=""/>
      	     
          </div>
    </div>
    <div class="three">
    	
    	<ul>
    		<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>
    		<li><a href="#">公共服务</a></li>
    		<li><a href="#">校友会</a></li>
    	</ul>
    </div>
    <div class="four">
    	<img src="image/shida.jpg">
    </div>
</body>
</html>

这次实战的收获

类选择器
.center {text-align: center}

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

小高写BUG

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫