初次尝试,史上最丑的web

目录

摘要 

web1

web2

总结


 

摘要 

Alex老师说,网页通过代码来实现 ,这些代码由浏览器解释并渲染成我们看到的丰富多彩的页面效果。
这个浏览器就相当于 Python 的解释器,专门负责解释和执行 ( 渲染)网页代码。
写网页的代码是专门的语言, 主要分为 Hmtl \ CSS \ JavaScript, 被称为网页开发三剑客,作用如
下:
Html
超文本标记语言( HyperText Markup Language ,简称: HTML )是⼀种用于创建网页的标准标
记语言,主要负责编写页面架构
CSS
CSS (Cascading Style Sheets) 用于渲染 HTML 元素标签的样式。
让你的网页样式变的丰富多彩起来,可以改变字体、颜色、排列方式、背景颜色等
JavaScript
页面脚本语言,可以让你的网页动起来
以上为老师带我对网页架构的初步认识,我也写了人生的第一和第二个web,虽然它们很丑(是真的很丑),但作为起点,还是值得记录的!接下来给大家看看吧

web1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my_first_web_page</title>
    <style type="text/css">
<!--    <link rel="stylesheet" type="text/css" href="text.css">-->
        div{
        border:1px dashed red;
        width:300px;
        position:relative;
        left:300px
        }
        p{
        background-color:yellow;
        font-size:18px;
        font-family:"PingFang HK";
        }

    </style>
</head>
<body>
<div>
    <h2>python基础web_page</h2>
    <h3>info_of_me</h3>
    <h4><span style="color:pink">不行我不会</span></h4>
    <p>
        <b>我是滋滋,最帅的滋滋</b>
    </p>
</div>
<table border="1" cellpadding="10">
    <tr>
        <th>姓名</th>
        <th>age</th>
        <th>学校</th>
        <th>专业</th>
    </tr>
    <tr>
        <td>liang</td>
        <td>19</td>
        <td>nw_university</td>
        <td>mathematics</td>
    </tr>
</table>
<p>这是我的照片</p>
<img src="微信图片_20201030132719.jpg" width="300">
<br>
<a href="https://blog.csdn.net/weixin_53664370?spm=1001.2100.3001.5343 " target="_blank">这是我的博客</a>
<ul>
    <li>zizi</li>
    <li>miemie</li>
    <li>羊
        <ul>
            <li>李狡辩</li>
            <li>美羊羊</li>
            <li>咩咩</li>
        </ul>
    </li>
</ul>
</body>
</html>

 web2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米官网</title>
    <style type="text/css">
        #menu{
        background-color:yellow;
        height:50px
        }
        #side_bar{
        background-color:orange;
        height:500px;
        width:10%;
        float:left
        }
        #content_box{
        background-color:greenyellow;
        height:500px;
        width:70%;
        float:left
        }
        #right_pc{
        font-size:18px;
        width:20%;
        float:left
        }
        #footer{
        background-color:pink;
        height:300px;
        clear:both
        }
    </style>
</head>
<body>
<div id="menu">
    <p>首页 电视 手环 笔记本 家电 路由器 智能服务</p>
</div>
<div id="side_bar">
    <ul>
        <li>手机</li>
        <li>家电</li>
        <li>IOT</li>
        <li>咨询</li>
    </ul>
</div>
<div id="content_box">
    <h2>大广告</h2>
</div>
<div id="right_pc">
    <h3 style="color:blue">品牌列表</h3>
    <ul>
        <li>上新精选</li>
        <li>小米众筹</li>
        <li>有品秒杀</li>
        <li>优品生活</li>
        <li>小米自营</li>
    </ul>
</div>
<div id="footer">
    <h3>footer...</h3>
</div>
</body>
</html>

 以上就是提到的史上最丑的web页面了,主要应用的是一些刚入门的基础知识操作,对布局最最初等的认知,以后还要跟着老师学习更多的知识,搭建更好看更美观的网页!

总结

学习代码真的是一件神奇幸福的事!继续加油

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不行我不会

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值