Java Web入门之css页面布局基础知识

最新推荐文章于 2021-05-26 15:28:55 发布

liuyuan185442111

最新推荐文章于 2021-05-26 15:28:55 发布

阅读量2.7k

点赞数 1

分类专栏：系列-Java Web入门文章标签： html css

本文链接：https://blog.csdn.net/liuyuan185442111/article/details/43762639

版权

系列-Java Web入门专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS控制页面样式的四种方式

行内样式、内嵌样式、链接样式、寻入样式。
行内样式，直接对HTML标签使用style=""，例如：<p style="color:#F00; background:#CCC; font-size:12px;"></p>。
内嵌样式，将CSS代码写在<head>…</head>之间，并且用<style type="text/css">…</style>进行声明。
链接样式，在<head></head>之间加上<link…/>就可以了，例如：<link type="text/css" rel="stylesheet" href="style.css" />
寻入样式，和链接样式比较相似，采用import方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌样式。
四种样式的优先级按照“就近原则”：行内样式 > 内嵌样式 > 链接样式 > 导入样式。

CSS选择器

CSS选择器最基本的有四种：标签选择器、ID选择器、类选择器、通用选择器。

盒子模型

块状元素和内联元素

块状元素，一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)和高度(height)起作用。常见块状元素为div和p。
内联元素，只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，宽度(width)和高度(height)不起作用。常见内联元素为“a”。img是个例外，它是内联元素，但可以设置长宽。
可以用float: left;来使几个块状元素置于同一行；可以用display: block;来使内联元素具有块状元素的性质（比如宽度高度有效）。加了float: left;就代表是块状元素了，然后还有float特性。

<html>
<head>    
    <title>简单导航栏</title>
    <style type="text/css">  
        body,div,ul,li{ padding: 0; margin: 0; }
        #nav{ width: 960px; height: 35px; background: #CCC; margin: 0 auto; margin-top: 30px; list-style: none;}
        #nav li{ float: left; height: 35px; line-height: 35px; text-align: center; }
        #nav li a{ font-size: 12px; color: #333; text-decoration: none;  height: 35px; display: block; float: left; padding: 0 10px; }
        #nav li a:hover{ background: #000; color: #FFF; text-decoration: underline; }
    </style>
</head>

<body>
    <ul id="nav">
        <li><a href="http://www.baidu.com/">百度</a></li>
        <li><a href="http://www.baidu.com/">第二个百度</a></li>
        <li><a href="http://www.baidu.com/">另一个百度</a></li>
        <li><a href="http://www.baidu.com/">最后一个百度</a></li>
    </ul>
</body>
</html>

posotion

<html>
<head>
    <title>定位的应用</title>
    <style type="text/css">
        #scrolltop{ width:40px; height:40px; background:#f5f5f5; position: absolute; right:8px; bottom:100px; }
        #scrolltop a{ display:block; width:40px; height:40px; background: #f5f5f5 url(scrolltop.png) no-repeat 0 3px; }
        #scrolltop a:hover{ background:#759fd9 url(scrolltop.png) no-repeat -40px 3px; }
    </style>
</head>

<body> 
    <div id="scrolltop">
        <a href="#"></a>
    </div>
</body> 
</html>

一个示例主页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
    <title>我的主页</title>
    <style type="text/css">
        *{ padding: 0; margin: 0; }
        html{ background: url(q.png);}
        body{ background: url(sinabloga.jpg) repeat-x; padding-top: 40px;}
        img{ border: none; }
        #header,#banner,#content,#footer{width: 800px; margin: 0 auto;}
        #navi_ul{  height: 32px; background: #CCC; list-style: none; }
        #navi_ul li a{ font-size: 14px; color: #333; text-decoration: none; height: 32px;  padding: 0 10px; line-height: 32px; float: left;}
        #navi_ul li a:hover{ background: #000; color: #FFF; text-decoration: none; }
        #banner{ height: 240px; margin: 10px auto;}
        #banner a img{width: 800px; height: 240px; }
        #content{background: #eaeaea; font-size: 12px; line-height: 24px;}
        #leftArticle{margin: 10px 0; float: left; display: inline;width: 500px;}
        #leftArticle p{color: #333;text-indent: 2em; margin-bottom: 30px;font-size: 14px;}
        #leftarticle h1{font-size: 24px;font-family: "微软雅黑","黑体";}
        #leftArticle h1 a{font-size: 20px; color: #900; text-decoration: none;}
        #leftArticle h1 a:hover{text-decoration: underline;}
        #rightInfo{width: 280px;}
        .clear{clear: both;}
        #rightInfo{margin: 10px; float: left; display: inline;}
        h1{font-size: 100%;}
        #rightInfo dl{margin-bottom: 10px;}
        #rightInfo dl dt{height: 32px;line-height: 32px;color: #fff;font-size: 14px;font-weight: bold;text-indent: 20px;}
        #rightInfo dl dd{height: 24px;line-height: 24px;text-indent: 16px;}
        #rightInfo dl dd a{color: #333;text-decoration: none;}
        #rightInfo dl dd a:hover{color: #900;text-decoration: underline;}
        #footer{background: #393838;height: 52px;line-height: 18px;margin-top: 10px;padding-top: 18px;text-align: center;color: #ccc;font-size: 12px;}
        #footer a{color: #ccc;text-decoration: none;}
        #footer a:hover{text-decoration: underline;}
        body{font-family: Verdana, Geneva, sans-serif;}
    </style>
</head>

<body>
    <div id="header">
        <a id="logo" href="#" style="float:left;background:#fff;">
            <img src="logo_small.png"/>
        </a>
        <ul id="navi_ul">
            <li><a href="http://www.baidu.com/">百度1</a></li>
            <li><a href="http://www.baidu.com/">百度2</a></li>
            <li><a href="http://www.baidu.com/">百度3</a></li>
            <li><a href="http://www.baidu.com/">百度4</a></li>
        </ul>
    </div>

    <div id="banner">
       <a href="http://www.baidu.com/" ><img src="banner.jpg"/></a>
    </div>

    <div id="content">
        <div id="leftArticle">
            <a id="articlePicA" ;href="#">
                <img width=500px; src="article.jpg"/>
            </a>
            <h1>
                <a href="#">local</a>
            </h1>
            <p>据09年全国Web前端开収行业调查统计显示，09年大型企业对亍Web前端开収人才需求紧缺。
            Web前端开収目前是一种新兴职业，与业癿前端开収人员绝大部分存在亍大型企业中，如腾讯、百度等，
            换种说法就是：选择仍事Web前端开収就等亍你癿一叧脚已绉迈迕了腾讯、百度等高薪企业。</p> 
        </div>
        <div id="rightInfo">
            <dl>
                <dt>职业规划</dt>
                <dd><a href="#">sddd</a></dd>
            </dl>
            <dl>
                <dt>职业规划</dt>
                <dd><a href="#">sddd</a></dd>
            </dl>
        </div>
    </div>
    <div class="clear"></div>
    <div id="footer">
        <p>
            <a href="#">关于我们</a>|
            <a href="#">广告服务</a>|
            <a href="#">联系我们</a>|
            <a href="#">广告服务</a>
            <br/>
            <a href="#">京ICP备100号</a> All rights (C) 1900-2014 Reserved
        </p>
    </div>
</body>

</html>