学习笔记11.7

最新推荐文章于 2024-08-23 14:03:47 发布

weixin_30687051

最新推荐文章于 2024-08-23 14:03:47 发布

阅读量98

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/l123789/p/6039118.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>
        <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>

转载于:https://www.cnblogs.com/l123789/p/6039118.html

weixin_30687051

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记11.7

今天进行了系统的网页布局练习题。<!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">...
复制链接

扫一扫