html和css进阶小练习

简介: html和css进阶小练习

第一题


<!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" xml:lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
     <title>Document</title>
     <style type="text/css">
    h2{ width:300px; height:40px; background: #ccc;font-size: 26px; font-weight: normal;}
     .ch{ width: 500px; height:30px; background:#a4bcc4; font-size: 18px; color: #333;}
     .en{ width: 500px; height:30px; background:#70b1c9; font-size: 18px; color: #333; text-indent: 2em;}
    .hotel{ width: 500px; height:30px; background:#c1b561; font-size: 18px; color: #333; text-align: center;}1    </style>
</head>
<body>
    <h2>客服电话</h2>
    <div>
        <p class="ch">国内客服电话:010-6728406</p>
        <p class="en">国际客服电话:(+086)1234543</p>
        <p class="hotel">酒店预订热线:400-666-6668</p>
    </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" xml:lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
     <title>Document</title>
     <style type="text/css">
    h1{ font-size: 36px; color:#fff; background:#19212a; height:50px; font-weight: normal;}
     span{ color:#1db69a; font-size: 16px;}
     p{ text-indent: 2em;}
    a{ color:#1db69a; font-size: 16px;}
    </style>
</head>
<body>
    <h1>基督山伯爵</h1>
    <p>年代:2016地区:法国演员: <span>路易斯·乔丹</span>  <span>伊冯·弗奴克丝</span>  <span>Pierre Mondy</span>  导演: <span>克劳德·奥当·拉哈</span> </p>
    <p>简介:埃德蒙(路易斯·乔丹 Louis Jourdan 饰)本是一个朝气蓬勃的年轻水手,他对生活充满了热情,与人为善的个性亦为他在江湖上结识了诸多朋友。梅塞迪丝(伊冯·弗奴克丝 Yvonne Furneaux 饰)是埃德蒙心爱的姑娘,当埃德蒙完成了此次海上作业回到陆地上后,两人就准备成婚。不幸的是,埃德蒙的幸福惹得情敌费尔南多(Jean-Claude Michel 饰)十分眼红,他和昏庸的法官威尔弗(Bernard Dhéran 饰),利用莫须有的罪名将埃德蒙送入了大牢。   十七年过去了,在狱友的帮助下,心中充满了仇恨的埃德蒙越狱成功,出狱后的他只有一个念头,那就是对导致他沦落到今天如此境地的所有人展开复仇。埃德蒙摇身一变成为了神秘莫测的基督山伯爵,在成功进入了上流社会后,他的复仇计划也逐步的实施着。<a href="##">收起<<</a></p>
    <a href="##">立即播放</a>
</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" xml:lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
     <title>Document</title>
 </head>
 <body>
     <h1>最新互怼场所 《剑灵》全新PVP地图浮游岛上线</h1>
     <p>2017-04-13 00:23:13</p>
    <p>4月44日消息,《剑灵》今日上线全新版本,伴随着新的势力PVP战场开放,浮游岛势力战正式拉开序幕。游戏还同步开放了全新的6人英雄副本,更有多套新时装华服出世,妆点这个暮春初夏好时节。与此同时,新一期的洪门之师2.0活动福利来袭,《剑灵》首个剧情类连载作品,《剑灵》声色坊也在今日更新了第四章新剧情,放学别走,浮游岛见。</p>
    <img src="pic1.jpg" height="261" width="540" alt="" />
    <h2>全新PVP地图浮游岛</h2>
    <p>《剑灵》全新PVP地图浮游岛是位于白青山脉北部的一个比较大型的岛屿,分布有武林盟和浑天教两大势力,不但物产丰富,岛上的景色也很怡人,早在白青版本上线的时候便备受各方瞩目,翘首等待许久后,浮游岛终于与广大灵芝见面。在浮游岛上两大势力将围绕着资源如古代龙、三大灵兽等展开频繁厮杀。并且在浮游岛上复活无需读图,再加上无限轻功系统,让每场激战都能持续处于快节奏状态中。</p>
    <img src="images/pic1.jpg" height="304" width="540" alt="" />
    <p>除了浮游岛外,《剑灵》还开放了全新的西洛副本遗失的海鸣巢穴,这是一个6人英雄本,也是《剑灵》首个水下副本。伴随着这个副本的开放,全新的灵核——天乾魂也将一并问世,玩家在完成遗失的海鸣巢穴挑战后,有机会获得封印的毁灭之天乾魂1段或者封印的苦痛之天乾魂1段,以及新的材料赤流结晶、天乾魂石,新材料可用于天乾魂成长之用。</p>
    <img src="images/pic2.jpg" height="320" width="540" alt="" />
</body>
</html>

第四题


<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style type="text/css">
         .con{
            width:600px;
            height:300px;
            border: 1px solid black;
            margin:50px auto 0;
        }
        .con{
            width:560px;
            height:240px;
            margin:0 auto;
        }
        .con ul{
            height:240px;
            margin-top:10px;
            padding:0px;
            list-style:none;
        }
        .con li{
            border-bottom:1px solid #ddd;
            padding-left: 20px;
        }
        .con a{
            text-decoration:none;
            line-height:37px;
            font-size:14px;
            color:#333;
        }
        .con a:hover{
            color:red;
        }
    </style>    
</head>
<body>
    <div class="con">
            <ul>
                <li><a href="#">从写十行代码到熟练写出一千行代码</a></li>
                <li><a href="#">封闭开发app上线,公司竟然裁员?</a></li>
                <li><a href="#">应届生:大公司的测试or小公司的开发?</a></li>
                <li><a href="#">如何看待技术的发展给我们带来的障碍?</a></li>
                <li><a href="#">公司干了5年多的开发,稳定还是突破</a></li>
                <li><a href="#">研究生毕业,该不该留在导师的公司</a></li>
            </ul>
    </div>
</body>
</html>
相关文章
|
6天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
4天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
57 34
|
7天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
58 33
|
5天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
19 2
|
28天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
107 24
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
97 7
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
56 6
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
71 5
|
2月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
52 5

热门文章

最新文章