学习笔记11.7

最新推荐文章于 2025-08-23 08:00:22 发布

转载最新推荐文章于 2025-08-23 08:00:22 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/l123789/p/6039118.html

文章标签：

#xhtml

本文分享了一次网页布局练习的经验，包括使用HTML与CSS实现特定样式的元素排列与样式调整，如固定位置的导航栏、旋转的方块及复杂的div布局等。

今天进行了系统的网页布局练习题。

<!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>
        <link rel="shortcut icon" href="favicon.ico">
        <style type="text/css">
            #a{
                    float:left;
                    height:30px;
                    width:100px;
                    line-height:30px;
                    vertical-align:middle;
                    text-indent:20px;
                    font-weight:bold;
                    font-family:微软雅黑;
                    color:#333;
                    
                }
            #a:hover
                {
                    color:#FFF;
                    background-color:#b3b6bb;
                    border-top:2px solid #F39;
                }
        
        </style>
    </head>
    
    <body>
        <div style=" width:100px; height:100px; ">
            <div style="border-top:100px solid #00F; border-bottom:100px solid transparent; border-left:100px solid transparent; border-right:100px solid transparent;">
            </div>
        </div>
        
        
        <div style="border-bottom:5px solid #603; border-left:5px solid #603; width:100px; height:100px; transform:rotate(45deg); margin:30px;">
            
        </div>
        
        
        <div>
            去掉页面自带边框剧中，字体微软雅黑，字的大小14px，给id叫content的div加属性属性为与外边距上20px、右0px，下0px，左300px，宽350px，高100px。外边框宽2px，实线、颜色#60F。超出部分隐藏。内容与单元格间距10px。外层是宽100px，高50px，与左边框距离是320px，超出部分隐藏与上边框距离是-2px。里面是一个一个倾斜45度、边长52px，粗2p颜色#60F的正方形边框，相对原来位置移动-27px，左右边距为0，背景色为白色。
        </div>
        
        
        <div style="width:500px; height:30px; border:1px solid #e9e9e9;">
            <div id="a">春节</div>
            <div id="a">元宵节</div>
            <div id="a">端午节</div>
            <div id="a">中秋节</div>
            <div id="a">国庆节</div>
        </div>
        
        
        <div>给需要随页面滚动还一直保持位置的div加position：fixed</div>
    </body>
</html>