CSS的用法与HTML的布局方法

1 篇文章 0 订阅
"本文通过两个实验介绍了HTML和CSS的基础应用。第一个实验涉及使用CSS选择符创建静态网页,分析了为何id选择符"BoldTextGreenText"无效。第二个实验展示了如何利用CSS盒子浮动实现三栏布局,分别设置了不同颜色和大小的浮动元素,以达到预期的网页显示效果。"
摘要由CSDN通过智能技术生成

【实验目的】

  1. 熟悉HTML页面布局的方法
  2. 掌握CSS用法

【实验内容】

  1. 查看CSS_EX.html文档利用CSS选择符制作下图所示的静态网页。分析为什么id="BoldText GreenText"不起作用? 

<html>
<head>
    <meta charset="UTF-8">
    <style>
        /*类选择符的定义*/
        .RedText{color: red;}
        .LargeFont{font-size:30px;}
        .BoldText{font-weight: bold;}
        .GreenText{color:green;}
        /*id选择符的定义*/
        #BoldText{font-weight: bold;}
        #GreenText{color:green;}
    </style>
</head>
<body>
<!--同一个类选择符可以被多个标签使用,一个标签也可以同时引用多个类选择器-->
<p class="RedText">段落1,class="RedText",设为红色字体</p>
<div class="LargeFont">这是一个div,class="LargeFont",字体设为30px</div>
<p class="RedText LargeFont">段落2,class="RedText LargeFont",设为红色字体,大小为30px</p>

<!--同一个标签不可以同时引用多个id选择符-->
<p id="BoldText">段落一,id="BoldText",设为加粗字体</p>
<div id="GreenText">这是一个div,id="GreenText",设为绿色字体</div>
<p class="BoldText GreenText">段落二,id="BoldText GreenText",加粗绿色字体</p>
</body>
</html>

实验结果:

2.利用CSS中的盒子浮动制作下图所示的静态网页

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CssFloat</title>
    <style type="text/css">
        html,body{height: 100%;}/*定义一个页面占整个画面的百分比*/
        /*定义left类*/
        #left{
            font-size:20px;/*定义字体大小*/
            background-color:red;/*定义背景颜色为红色*/
            float: left;/*定义浮动范围在页面左边*/
            width:20%;/*占页面宽度是百分之20*/
            height:100%;
        }
        /*定义content类*/
        #content{
            text-align:center;
            font-size:20px;
            background-color:yellow;
            float: left;
            width:60%;
            height:100%;
        }
        /*定义right类*/
        #right{
            font-size:20px;
            background-color: darkgoldenrod;
            width:20%;
            float: left;
            height:100%;
        }
    </style>
</head>
<body>
<div id="left">left</div>
<div id="content">content</div>
<div id="right">right</div>
</body>
</html>

实验结果:

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值