零基础HTML与CSS编码（二）

最新推荐文章于 2024-07-12 14:38:32 发布
最新推荐文章于 2024-07-12 14:38:32 发布
阅读量556 收藏
点赞数
分类专栏： web前端实践 文章标签： css html 编码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shjxa/article/details/52850125
版权

任务目的

  • 针对设计稿样式进行合理的HTML架构，包括以下但不限于：
    • 掌握常用HTML标签的含义、用法
    • 能够基于设计稿来合理规划HTML文档结构
    • 理解语义化，合理地使用HTML标签来构建页面
  • 掌握基本的CSS编码，包括以下但不限于：
    • 了解CSS的定义、概念、发展简史
    • 掌握CSS选择器的含义和用法
    • 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式


任务要求：http://ife.baidu.com/task/detail?taskId=5

[demo] https://happyshj.github.io/mygit-test_ife-task_05/task_05.html

HTML代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="task_05.css">
    <title>task_01</title>
</head>
<body>
<header>
    <nav>
        <img src="meitu.jpg" alt="美图">
        <ul>
            <li><a href="#link4">导航链接四</a></li>
            <li><a href="#link3">导航链接三</a></li>
            <li><a href="#link2">导航链接二</a></li>
            <li><a href="#link1">导航链接一</a></li>
        </ul>
    </nav>
</header>
<aside>
    <h3>这里以后是一个侧栏，这是侧栏的标题</h3>
    <form>
        <label class="mail">请输入邮箱地址 <input type="text"placeholder="这是一个文本框"></label>
        <p class="text">邮箱地址请按要求格式输入</p>
        <label class="password">请输入密码 <input type="password" placeholder="这是一个文本框" ></label>
        <br />
        <label class="password1">请重复输入密码 <input type="password" placeholder="这是一个文本框"></label>
        <p class="text">密码请为6-16位英文数字</p>

        <div class="sex">
            <span>性别 </span>
            <label><input type="radio" name="sex" value="m" checked>男</label>
            <label><input type="radio" name="sex" value="w">女</label>
        </div>
        <div class="city">
            <label>城市
                <select name="city">
                    <option value="beijing" selected>北京</option>
                    <option value="guangzhou">广州</option>
                </select>
            </label>
        </div>
        <div class="love">
            <span>爱好 </span>
            <label><input type="checkbox">运动</label>
            <label><input type="checkbox">艺术</label>
            <label><input type="checkbox">科学</label>
        </div>
        <div class="textarea">
            <div class="label">
                <label>个人描述</label>
            </div>
            <textarea placeholder="这是一个多行输入框，输入您的个人描述"></textarea>
        </div>
        <button type="submit">确认提交</button>
    </form>
</aside>
<div class="container">
    <article class="article1">
        <h2><a id="link1">文章一级标题</a></h2>
        <h3>文章二级标题</h3>
        <p>
            <span>文章作者</span>
            <span>文章发表时间</span>
        </p>
        <p class="p1">这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，<br />换行了<br />这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />
            这是一个很长很长的段落，这是一个很长很长的段落，
            <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>
            这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落。</p>
        <img src="meitu.jpg" alt="美图">
        <p class="p1">这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            <b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，
            <a href="http://ife.baidu.com" target="_blank">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落。</p>
    </article>

    <article class="article2">
        <h2><a id="link2">另一篇文章一级标题</a></h2>
        <h3>文章二级标题</h3>
        <p>
            <span>文章作者</span>
            <span>文章发表时间</span>
        </p>
        <p class="p1">这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，<br />换行了<br />这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />
            这是一个很长很长的段落，这是一个很长很长的段落，
            <a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>
            这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落。</p>
        <img src="meitu.jpg" alt="美图">
        <ul>
            <li>列表项目一</li>
            <li>列表项目二</li>
            <li>列表项目三</li>
        </ul>
    </article>

    <article class="article3">
        <h2><a id="link3">图片</a></h2>
        <figure>
            <figcaption>美图</figcaption>
            <img src="meitu.jpg" alt="美图">
        </figure>
        <figure>
            <figcaption>美图</figcaption>
            <img src="meitu.jpg" alt="美图">
        </figure>
        <figure>
            <figcaption>美图</figcaption>
            <img src="meitu.jpg" alt="美图">
        </figure>
        <figure>
            <figcaption>美图</figcaption>
            <img src="meitu.jpg" alt="美图">
        </figure>
        <figure>
            <figcaption>美图</figcaption>
            <img src="meitu.jpg" alt="美图">
        </figure>
        <figure>
            <figcaption>美图</figcaption>
            <img src="meitu.jpg" alt="美图">
        </figure>
        <figure>
            <figcaption>美图</figcaption>
            <img src="meitu.jpg" alt="美图">
        </figure>
        <figure>
            <figcaption>美图</figcaption>
            <img src="meitu.jpg" alt="美图">
        </figure>
        <figure>
            <figcaption>美图</figcaption>
            <img src="meitu.jpg" alt="美图">
        </figure>
        <figure>
            <figcaption>美图</figcaption>
            <img src="meitu.jpg" alt="美图">
        </figure>
    </article>

    <article class="article4">
        <h2><a id="link4">最后一篇文章一级标题</a></h2>
        <h3>文章二级标题</h3>
        <p>
            <span>文章作者</span>
            <span>文章发表时间</span>
        </p>
        <ol>
            <li>排名1</li>
            <li>排名2</li>
            <li>排名3</li>
        </ol>
        <p>下面是一个表格，给表格加了一个border="1"好让你看出是一个表格</p>
        <table>
            <thead>
            <tr>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
            </tr>
            </thead>

            <tbody>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="#">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="#">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="#">操作</a></td>
            </tr>
            <tr>
                <td>表内容单元格</td>
                <td>表内容单元格</td>
                <td><a href="#">操作</a></td>
            </tr>
            </tbody>

            <tfoot>
            <tr>
                <td>总计</td>
                <td colspan="2">1000</td>
            </tr>
            </tfoot>
        </table>
    </article>
</div>

<footer>
    <span>版权所有©</span>
</footer>
</body>
</html>

CSS代码为： 

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: gray;
    font-family: SimSun-ExtB;
    min-width: 740px;
}
nav{
    background-color: darkslategray;
    width: 100%;
    height: 70px;
}
nav img{
    height: 50px;
    width: 50px;
    float: left;
    border-radius: 50px;
    margin-left: 20px;
    margin-top: 10px;
}
nav ul li{
    line-height: 70px;
    float: right;
    width: 100px;
    padding-right: 10px ;
}
nav ul li a{
    color: white;
    text-decoration: none;
}
.container{
    margin-right: 480px;
}
.article1,.article2,.article3,.article4,aside{
    margin: 20px;
    background-color: white;
    padding: 30px 20px;
}
h3{
    color: grey;
    margin-top: 10px;
    margin-bottom: 10px;
}
p span{
    color: grey;
    font-size: 14px;
}
.p1{
    font-size: 15px;
    line-height: 25px;
    text-indent: 2em;
    margin-top: 10px;
    margin-bottom: 10px;
}
.article1 img,.article2 img{
    width: 120px;
    height: 150px;
}
.article2 ul li{
    list-style-type: none;
    margin-top: 10px;
}
.article3 figure{
    border: 1px solid lightgray;
    width: 120px;
    height: 150px;
    margin-top: 20px;
    margin-left: 40px;
    display: inline-block;
}
.article3 figure figcaption{
    text-align: center;
    margin: 10px auto;
    font-size: 14px;
}
.article3 figure img{
    width: 100px;
    height: 100px;
    margin-left: 10px;
    margin-right: 10px;
}
.article4 ol li{
    margin-left: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.article4 table{
    width: 94%;
    margin-left: 5px;
    margin-right: 5px;
    border-collapse: collapse;

}
.article4 table td,.article4 table th{
    border: 1px solid gray;
    height: 25px;
    font-size: 14px;
}
.article4 table th{
    background-color: black;
    color: white;
    text-align: left;
}
.article4 table tfoot{
    background-color: gray;
}
aside{
    margin: 20px;
    background-color: white;
    width: 400px;
    float: right;
}
aside h3{
    color: black;
}
aside form{
    font-size: 14px;
}
.mail{
    margin-left: 20px;
}
.text{
    color: gray;
    font-size: 14px;
    margin-left: 124px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.password{
    margin-left: 48px;
    display: inline-block;
    margin-bottom: 10px;
}
.password1{
    margin-left: 20px;
    margin-top: 10px;
}
.sex,.city,.love{
    margin-left: 90px;
    margin-bottom: 10px;
}
.textarea{
    margin-left: 60px;
    margin-bottom: 10px;
}
.textarea .label{
    float: left;
    margin-right: 8px;
}
.textarea textarea{
    width: 250px;
    height: 100px;
    font-size: 18px;
}
button{
    width: 360px;
    height: 40px;
    margin-left: 20px;
    background-color: blue;
    border: 1px solid blue;
    border-radius: 10px;
    color: white;
    font-size: 18px;
    font-weight: bold;
}
footer{
    background-color: black;
    width: 100%;
    height: 50px;
    color: white;
    text-align: center;
    line-height: 50px;
}

图片为：


shjxa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 | （一）前端简介 | 尚硅谷前端html+css零基础教程2023最新
因为健忘，所以记点有的没的〒▽〒
07-15 822
（一）前端简介 | 尚硅谷前端html+css零基础教程2023最新
IFE-TASK17（任务十七：零基础JavaScript编码（五））
HangMine的博客
10-18 329
前言： 百度前端技术学院，任务十七：零基础JavaScript编码（五） 知识点： 1）构建一个对象，记录当前页面的表单选项 var pageState = { nowSelectCity: -1, nowGraTime: "day" }; 2）条状图的宽度 =  间隔 = 屏幕宽度除以数据量，注意最左的特殊处理 3）条状图的高度 = 数据AQI的数值，
【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
chen_nnn的博客
02-17 1317
笔者在哔哩哔哩弹幕网学习前端器件内所做的学习笔记，分享出来供大家参考。
前端「HTML+CSS」零基础入门学习笔记
weixin_61370021的博客
04-03 1458
HTML+CSS入门学习，这篇就够了！
【ife】任务二：零基础HTML及CSS编码（一）
筱葭的博客
12-14 788
task2.html 任务二：零基础HTML及CSS编码（一） 导航链接一 导航链接二 导航链接三 导航链接四 文章一级标题 文章二级标题 文章作者  文章发表时间 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的
Html5 + Css3笔记详细汇总大全
weixin_50637054的博客
04-10 4115
Html5 + Css3笔记详细汇总大全
HTML+CSS基础自学笔记（前端入门）
JunfuChang
05-11 1389
合作勿扰，发表文章仅供学习，未经同意请勿转载，不进行商业合作！ 本文章为自学笔记-------------By KnowCode 根据教程内容及查阅W3C相关文档，本文系统介绍了自学的基础Html及CSS相关知识，适合有从事前端开发或学习了解意向的前端小白，仅供参考，若发现错误望及时指正！ word文档 下载链接： 1、蓝奏云链接下载（建议） 蓝奏云链接 2、百度网盘下载链接 百度网盘链接 提取码：ryan 自学视频：网易云课堂《从零玩转HTML5前端+跨平台开发上》 自学文档：web官方文档 HTML部
尚硅谷H5+CSS3基础课笔记一（HTML部分）
weixin_43285205的博客
05-02 1031
尚硅谷前端HTML5+CSS3网课笔记（已知识点形式），HTML部分。
HTML零基础入门教程完整版
热门推荐
哈哈
09-11 2万+
HTML零基础入门教程完整版
HTML5+CSS3
m0_54840061的博客
03-17 1691
1.网页指的是超文本标记语言，不是编程语言，而是一种标记语言。标记语言是一套标记标签所谓超文本，有两层含义：（1）超出了文本限制，可以是图片，音频、视频等（2）它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）2.浏览器有IE、火狐、谷歌、Fafari、Opera等**浏览器内核（渲染引擎）：**负责读取网页内容，整理讯息，计算网页的显示方式并显示页面3.Web标准Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
html+css前端编码规范共7页.pdf.zip
11-19
这份7页的PDF可能涵盖了这些以及更多关于HTML和CSS编码规范的细节，包括代码的可测试性、性能优化和跨浏览器兼容性等方面。通过遵循这些规范，开发者可以创建出高质量、易维护的前端代码，为用户带来更好的浏览体验...
HTML+CSS政府网站模板
10-13
总之，“HTML+CSS政府网站模板”是一个高效的起点，能够帮助开发者快速创建出专业且功能完善的政府网站，同时减少了从零开始设计和编码的工作量，提高了开发效率。在实际应用中，应结合具体需求进行调整和优化，以...
教你零基础三分钟用HTML编写出一个网页
01-20
对于初学者而言，HTML是互联网开发的基础，它允许零基础的用户快速入门网页制作。 首先，创建一个HTML文件非常简单。在桌面右键新建一个文本文档（txt记事本），然后将其命名为你的网页文件名，扩展名为.html或.htm...
零基础如何快速学好web前端，HTML5 CSS3 3D魔方拼图网页开发源码
07-24
"零基础如何快速学好web前端.txt"和"web前端学习必看资料.txt"这两份文档很可能是提供学习策略和资源的指南，包含了学习路径建议、参考资料和练习项目，对于初学者来说是非常宝贵的指导。 为了更好地学习，你需要...
Head First HTML与CSS、XHTML 配套代码
01-14
《Head First HTML与CSS、XHTML 配套代码》是一本专为初学者设计的教材，旨在帮助读者从零开始掌握网页制作的基础知识。这本书通过直观、趣味的方式讲解了HTML、CSS以及XHTML的核心概念，使得学习过程既轻松又有效。...
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1218
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 650
仅对已定位的元素（）有效，默认值为0，可以为负值。
css画半圆&&画圆弧
最新发布
M1512415的博客
07-12 167
【代码】css画半圆&&画圆弧。
CSS上下悬浮特效
m0_56164131的博客
07-09 545
要实现一个上下悬浮的特效，可以使用CSS的@keyframes规则和动画属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值