首页 > 其他分享 >HTML5+CSS3集训（14）

HTML5+CSS3集训（14）

时间：2024-07-01 17:28:52浏览次数：25  
标签：CSS3 40px 14 text 100% height width HTML5 center 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="">天猫</a>
                    </li>
                    <li>
                        <a href="">百度</a>
                    </li>
                    <li>
                        <a href="">京东</a>
                    </li>
                    <li>
                        <a href="">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
    <style>
    *{
        list-style:none;
        margin: 0;
        padding: 0;
        text-align:center;
    }  
    </style>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="">天猫</a>
                    </li>
                    <li>
                        <a href="">百度</a>
                    </li>
                    <li>
                        <a href="">京东</a>
                    </li>
                    <li>
                        <a href="">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
    <style>
    *{
        list-style:none;
        margin: 0;
        padding: 0;
        text-align:center;
    }  
    .top, .bottom{
        width:100%;
        height:40px;
        background:#63f;
        line-height:40px;
        text-align:center;
        font-weight:bold;
        color:#fff;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="">天猫</a>
                    </li>
                    <li>
                        <a href="">百度</a>
                    </li>
                    <li>
                        <a href="">京东</a>
                    </li>
                    <li>
                        <a href="">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
    <style>
    *{
        list-style:none;
        margin: 0;
        padding: 0;
        text-align:center;
    }  
    .top, .bottom{
        width:100%;
        height:40px;
        background:#63f;
        line-height:40px;
        text-align:center;
        font-weight:bold;
        color:#fff;
    }
    .content{
        width:100%;
        height:640px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="">天猫</a>
                    </li>
                    <li>
                        <a href="">百度</a>
                    </li>
                    <li>
                        <a href="">京东</a>
                    </li>
                    <li>
                        <a href="">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
    <style>
    *{
        list-style:none;
        margin: 0;
        padding: 0;
        text-align:center;
    }  
    .top, .bottom{
        width:100%;
        height:40px;
        background:#63f;
        line-height:40px;
        text-align:center;
        font-weight:bold;
        color:#fff;
    }
    .content{
        width:100%;
        height:640px;
    }
    .cleft{
        float:left;
        width:200px;
        height:640px;
        background:#69f;
    }
    .cright{
        height:640px;
        background:pink;
        margin-left:200px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="">天猫</a>
                    </li>
                    <li>
                        <a href="">百度</a>
                    </li>
                    <li>
                        <a href="">京东</a>
                    </li>
                    <li>
                        <a href="">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
    <style>
    *{
        list-style:none;
        margin: 0;
        padding: 0;
        text-align:center;
    }  
    .top, .bottom{
        width:100%;
        height:40px;
        background:#63f;
        line-height:40px;
        text-align:center;
        font-weight:bold;
        color:#fff;
    }
    .content{
        width:100%;
        height:640px;
    }
    .cleft{
        float:left;
        width:200px;
        height:640px;
        background:#69f;
    }
    .cright{
        height:640px;
        background:pink;
        margin-left:200px;
    }
    .cleft li{
        width:100%;
        height:40px;
        border-bottom:1px dashed #ccc;
        line-height:40px;
        text-align:center;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="">天猫</a>
                    </li>
                    <li>
                        <a href="">百度</a>
                    </li>
                    <li>
                        <a href="">京东</a>
                    </li>
                    <li>
                        <a href="">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p180</title>
    <style>
    *{
        list-style:none;
        margin: 0;
        padding: 0;
        text-align:center;
    }  
    .top, .bottom{
        width:100%;
        height:40px;
        background:#63f;
        line-height:40px;
        text-align:center;
        font-weight:bold;
        color:#fff;
    }
    .content{
        width:100%;
        height:640px;
    }
    .cleft{
        float:left;
        width:200px;
        height:640px;
        background:#69f;
    }
    .cright{
        height:640px;
        background:pink;
        margin-left:200px;
    }
    .cleft li{
        width:100%;
        height:40px;
        border-bottom:1px dashed #ccc;
        line-height:40px;
        text-align:center;
    }
    iframe{
        width:100%;
        height:100%;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="top">个人学习管理平台</div>
        <div class="content">
            <div class="cleft">
                <ul>
                    <li>
                        <a href="http://www.tmall.com" target="box">天猫</a>
                    </li>
                    <li>
                        <a href="http://www.tmall.com" target="box">百度</a>
                    </li>
                    <li>
                        <a href="http://www.jd.com" target="box">京东</a>
                    </li>
                    <li>
                        <a href="http://www.sina.com" target="box">新浪</a>
                    </li>
                </ul>
            </div>
            <div class="cright">
                <iframe src="http://www.tmall.com" name="box" frameborder="0"></iframe>
            </div>
        </div>
        <div class="bottom">网页设计学习小组</div>
    </div>
</body>
</html>

标签：CSS3,40px,14,text,100%,height,width,HTML5,center
From： https://blog.csdn.net/2301_78986604/article/details/140082323

相关文章

  • css3动画实现数字动态增加
    要实现数字的动态增加效果，可以使用CSS3的@keyframes规则来创建动画，并使用JavaScript来更新数字。以下是一个简单的实现示例：HTML:<divid="counter"class="counter">0</div>CSS:.counter{/*初始样式*/}@keyframesincreaseNumber{from{opacity:0;transfo......
  • C++ //练习 14.17 你在7.5.1节的练习7.40（第261页）中曾经选择并编写了一个类，你认为它应
    C++Primer（第5版）练习14.17练习14.17你在7.5.1节的练习7.40（第261页）中曾经选择并编写了一个类，你认为它应该含有相等运算符吗？如果是，请实现它；如果不是，解释原因。环境：LinuxUbuntu（云服务器）工具：vim 代码块classDate{ public: Date(); Date(size_ty,size_tm,siz......
  • HTML5+CSS3+JS小实例：图片九宫格
    实例：图片九宫格技术栈：HTML+CSS+JS效果：源码：【HTML】<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • 141个图表，完美展示数据分类别关系！
    本文介绍使用Python工具seaborn详细实现分类关系图表，包含8类图141个代码模版。分类关系图表用于展示数字变量和一个或多个分类变量之间的关系，可以进一步分为：箱形图（boxplot）、增强箱形图（enhancedboxplot）、小提琴图（violinplot）、抖动散点图（jitterplot）、蜂群图（beeswarmplot）、......
  • CF1148F Foo Fighters
    牛逼贪心题假设都是将总和正的变成负的，所以如果总和是负的，val取相反数对于二进制操作，我们一位一位考虑，想让其二进制下1的个数最好变成奇数，只能选一个数保留哪些1，所以我们保留一个1就能乘上-1，改变了奇偶性。贪心满足无后效性，最优子结构，局部最优解为全局最优解，我们尝试将一个数二......
  • 代码随想录算法训练营第50天 | 1143.最长公共子序列 、1035.不相交的线 、53. 最大子
    这几题都挺类似，都是求最长公共子序列，有些题目稍微变了下1143.最长公共子序列体会一下本题和718.最长重复子数组的区别视频讲解：https://www.bilibili.com/video/BV1ye4y1L7CQhttps://programmercarl.com/1143.最长公共子序列.html/***@param{string}text1*@param{......
  • C++Primer Plus 第十四章代码重用：模板类和友元14.4.9 ----002
    C++PrimerPlus第十四章代码重用：模板类和友元14.4.9提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：模板类和友元14.4.9提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录C++PrimerPlus第十四章代码重用：模板类和友元14.4......
  • loj#2880. JOISC 2014 稻草人
    搞了很久，题解区有线段树爆改pushup高妙做法说下cdq分治先将点都按横坐标从小到大排序，cdq分治，那我们现在只需要考虑分治过程中\([l,mid]\)和\([mid+1,r]\)互相形成的合法点对，显然左边的横坐标都小于右边的横坐标。能够发现，如果右边有一个点插在一对本来合法的点之间，那么那对合法......
  • JAVA高级进阶14设计模板
    第十四天、设计模板什么是设计模板（Designpattern）?一个问题通常有n种解法，其中肯定有一种解法是最优的，这个最优的解法被人总结出来了，称之为设计模式设计模式有20多种，对应20多种软件开发中会遇到的问题单例设计模式单例设计模式作用：确保一个类只有一个对象场景：计算......
  • [题解]CF1714F Build a Tree and That Is It
    思路由于题目中说这是一棵无根树，不太方便思考，于是，我们可以假装把这棵树看做有根树。首先我们令\(d_1,d_2,d_3\)分别表示从根节点到节点\(1,2,3\)的长度（不算相交部分）。那么我们可以得到下式：\[\left\{\begin{matrix}d_{12}=d_1+d_2\\d_{13}=d_1+d_3\\......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99