html做个简单网页的学习

最新推荐文章于 2024-06-04 13:04:19 发布
最新推荐文章于 2024-06-04 13:04:19 发布
阅读量684 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lord_zang/article/details/101064695
版权

1.使用表格做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>w</title>
</head>
<body>
<table width="100%">
    <tr>
        <td align="left">
            <img src="../img/logo2.png" height="50px" >
        </td>
        <td align="center">
            <img src="../img/header.jpg" height="50px">
        </td>
        <td align="right">
            <a href="#" target="_top">登入</a>
            <a href="#" target="_top">注册</a>
            <a href="#" target="_top" >注册</a>
        </td>
    </tr>
            <table width="100%" bgcolor="black" >
                <tr >
                    <td style="text-align: center"><font color="white" size="2px">首页</font></td>
                    <td style="text-align: center"><font color="white" size="2px">首页</font></td>
                    <td style="text-align: center"><font color="white" size="2px">首页</font></td>
                    <td style="text-align: center"><font color="white" size="2px">首页</font></td>
                    <td style="text-align: center"><font color="white" size="2px">首页</font></td>
                </tr>
            </table>
    <tr>
        <img src="../img/1.jpg" width="100%">
    </tr>
    <tr>
        <img src="../img/title2.jpg">
    </tr>
    <tr>
        <td>
            <table width="100%">
                <tr >
                    <td rowspan="2"  width="206px" height="480px"><img src="../products/hao/big01.jpg"></td>
                    <td colspan="3" height="240px" ><img src="../products/hao/middle01.jpg"height="240px" width="100%" ></td>
                    <td><img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p><font color="red"> $999</font></p>
                    </td>
                    <td><img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p>$999</p>
                    </td>
                    <td><img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p>$999</p>
                    </td>
                </tr>
                <tr>
                    <td><img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p>$999</p>
                    </td>
                    <td><img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p>$999</p>
                    </td>
                    <td><img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p>$999</p>
                    </td>
                    <td><img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p>$999</p>
                    </td>
                    <td><img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p>$999</p>
                    </td>
                    <td><img src="../products/hao/small06.jpg">
                        <p>洗衣机</p>
                        <p>$999</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr >
        <td >
            <img src="../products/hao/ad.jpg" width="100%">
        </td>
    </tr>
    <tr>
        <td><img src="../img/footer.jpg" width="100%"></td>
    </tr>
    <tr>
        <td>
            <table width="100%">
                <tr align="center">
                    <td>
                        <a href="#">你好</a>
                        <a href="#">你好</a>
                        <a href="#">你好</a>
                        <a href="#">你好</a>
                        <a href="#">你好</a>
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        Copysdjfkjsdofjk sdjofjsdijf
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>>
</body>
</html>

2.使用div做同样的网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        .logo{
            float:left;
            width: 33%;
            height: 60px;
            line-height: 60px;
        }
        .menu{
            text-decoration: none;
            height: 20px;
            text-align: center;
            line-height: 20px;
            width: 18%;
            display:inline-block;
        }
        .prodeucts{
            text-align: center;
            float: left;
            width: 16.6%;
            height: 240px;
        }
    </style>
</head>
<body>
<div>
<div>
        <div>
        <div class="logo" ><img src="../img/logo2.png" height="50px"></div>
        <div class="logo" align="center"><img src="../img/header.png" ></div>
        <div class="logo" align="right"><a href="#">登入</a><a href="#">注册</a><a href="#">购物</a></div>
        </div>
    <div style="clear: both"></div>
        <div style="background: black; height: 20px"   >
            <a href="#" class="menu"> <font color="white"> 首页</font> </a>
            <a href="#" class="menu"> <font color="white"> 手机数码</font></a>
            <a href="#" class="menu"> <font color="white"> 鞋靴箱包</font></a>
            <a href="#" class="menu"> <font color="white"> 办公电脑</font></a>
            <a href="#" class="menu"> <font color="white"> 香烟酒水</font></a>
         </div>
        </div><img src="../img/1.jpg">

    <div>
        <h3>最新商品<img src="../img/title2.jpg"></h3>
    </div>
<div>
        <div style="float: left; height: 480px" ><img src="../products/hao/big01.jpg"></div>
        <div style="float:left;height: 480px;width: 80%">
            <div style="float:left; height: 240px;width: 50%;">
                <img src="../products/hao/middle01.jpg" height="240px" width="100%" >
            </div>
            <div class="prodeucts">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p><font color="red">$999</font></p>
            </div>
            <div class="prodeucts">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p><font color="red">$999</font></p>
            </div>
            <div class="prodeucts">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p><font color="red">$999</font></p>
            </div>
            <div class="prodeucts">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p><font color="red">$999</font></p>
            </div>
            <div class="prodeucts">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p><font color="red">$999</font></p>
            </div>
            <div class="prodeucts">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p><font color="red">$999</font></p>
            </div>
            <div class="prodeucts">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p><font color="red">$999</font></p>
            </div>
            <div class="prodeucts">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p><font color="red">$999</font></p>
            </div>
            <div class="prodeucts">
                <img src="../products/hao/small06.jpg">
                <p>洗衣机</p>
                <p><font color="red">$999</font></p>
            </div>
        </div>
    </div>
<div>
    <img src="../products/hao/ad.jpg" width="100%">
</div>

<div>
    <img src="../img/footer.jpg" width="100%">
</div>

<div style="text-align: center">
    <a href="#">关于我们</a>
    <a href="#">关于我们</a>
    <a href="#">关于我们</a>
    <a href="#">关于我们</a>
    <a href="#">关于我们</a>
    <a href="#">关于我们</a>
</div>

<div style="text-align: center">
    Copyright @ 2019-2039 中软国际 版权所有
</div>
</div>
</body>
</html>

做大数据只需要了解html 要看的懂代码就行

顺便做了一个淘宝登入界面 不过这是留给本人看的 因为做的很烂 之后会修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            display: block;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
        }
        .page{
            margin-left:150px;
            height: 100px;
        }
        .header{
            float: left;
            padding-top: 20px;
        }
        .content{
            float: left;
            border: 1px solid;
            line-height: 15px;
            height: 30px;
            background: #fef2f2;
            border-color: #ffb4a8;
            background-color: #fef2f2;
            color: #6C6C6C;
        }
        .error{
            font:  12px/1.5 "Microsoft YaHei",tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
        }
        .link{
            float: right;
            line-height: 44px;
            color: #666;
            font-size: 12px;
            text-decoration: none;
        }
        .login-newbg{
            position: absolute;
            top: 35%;
            right: 10%;
            width: 400px;
            height: 300px;
        }
        .wjmm{
            position: absolute;
            top: 70%;
            right: 25%;
        }
        form{
            position: absolute;
            top: 45%;
            right: 3%;
            width: 400px;
            height: 300px;
        }
        .submit
        {
            width: 160px;
            color: white;
            background: red;
        }
        .albbjt{
            text-decoration: none;
            margin: 5px 200px 0px 200px;
            text-align: center;
            border-top: 2px solid ;
            border-bottom: 2px solid;
            border-color: #6C6C6C;
        }
        .biabiabia{
            position: absolute;
            left: 20%;
        }
    </style>
</head>
<body>
<div class="page">
    <div class="header">
        <a href="https://login.taobao.com"></a><img src="../taobao/淘宝logo.png " height="40px" >
    </div>
    <div class="content" style="text-align: center;width: 880px; margin: 10px 0 0 100px;">
    <p class="error">为确保您账户的安全及正常使用，依《网络安全法》相关要求，6月1日起会员账户需绑定手机。如您还未绑定，请尽快完成，感谢您的理解及支持！</p>
    </div>
    <a href="#" class="link">登录页面"改进建议</a>
</div>
    <div  style="background-image: url(../taobao/bgcccc.jpg); width: 100%;height: 600px">
        <img class="login-newbg" src="../taobao/登入界面.jpg" >
        <form>
            <p>密码输入</p>
            <input type="text" name="firstname" value="请输入账号">
            <br><br>
            <input type="text" name="lastname" value="请输入密码">
            <br><br>
            <input type="submit" value="登入" class="submit" >
        </form>
        <div class="wjmm"><a href="#" >忘记密码</a>
        </div>
    </div>

<div class="footer">
    <div class="albbjt">
        <a>阿里巴巴集团|阿里巴巴国际站|阿里巴巴中国站|全球速卖通|淘宝网|天猫|聚划算|一淘|阿里妈妈|飞猪|虾米|阿里云计算|云OS|万网|支付宝|来往</a>
    </div>
    <div style="text-align: center;">
        <p>关于淘宝合作伙伴营销中心廉正举报联系客服开放平台诚征英才联系我们网站地图法律声明隐私权政策© 2019 Taobao.com 版权所有</p>
        <p>网络文化经营许可证：浙网文[2016]0132-032号|增值电信业务经营许可证：浙B2-20080224-1|信息网络传播视听节目许可证：1109364号</p>
    </div>
    <div class="biabiabia"><img src="../taobao/biabiabia.gif"></div>
</div>
</body>
</html>
Lord_zang
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML写一个简单网页
qq_45948867的博客
08-18 4万+
最近学习了一点HTML，闲来无事写个网页看看，欢迎、改进、留言。 演示地点：跳转到演示地点 一、初始化页面 body,button,dd,dl, dt,form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,a,div,span { margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoratio.
用html制作简易网页
Cc1735781705的博客
09-04 1万+
66
一个简单的HTML网页代码
12-07
一个简单的html代码，可以用txt或者DW打开，就是很基础的一些含表格，主题可替换
一个简单的HTML网页 、个人主页网页设计(HTML+CSS)
最新发布
网页设计与制作 | HTML+CSS+JS
06-04 2095
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
简单的html网页
10-09
简单的html。
一个简单的HTML5网页设计
12-11
在这个“一个简单的HTML5网页设计”项目中，我们可以看到它被应用于创建一个多页面的网站，可能是某个大学生的结课作业。 首先，HTML5引入了语义化标签，如`<header>`, `<nav>`, `<section>`, `<article>`, `...
用HTML制作简单的网页.zip
10-20
用HTML制作简单的网页，首先你需要了解HTML的基本结构和元素。HTML文档通常由头部（Head）和主体（Body）两部分组成，头部包含元信息，如标题、字符集设置等，而主体则是网页的实际内容。 在HTML中，我们通过标签来...
html.zip_简单的网页html
09-19
简单的网页html"压缩包中，包含了六个HTML文件：5.html、3.html、4.html、2.html、1.html和6.html。这些文件可能是为初学者设计的，旨在教授基本的HTML语法和结构。 1. HTML基本结构：每个HTML文件通常由<!DOCTYPE ...
XHTML入门学习教程:简单网页制作
12-09
在这个“XHTML入门学习教程：简单网页制作”中，我们将逐步了解如何创建一个基本的XHTML网页。 首先，我们要知道XHTML的基本结构。每个XHTML网页都由两大部分组成：`<head>`和`<body>`。`<head>`元素包含了网页的元...
wangyezhizuo.rar_HTML简单网页_简单网页_网页制作
09-24
【标题】"wangyezhizuo.rar"是一个包含HTML简单网页制作示例的压缩文件，主要针对初学者或想要了解基础网页制作的人群。这个压缩包可能包含了详细步骤、代码示例以及一些基本的网页设计概念。 【描述】中提到的是...
一个简单的HTML网页
11-26
自己做的一个简单的有关汽车销售的HTML静态网页
自己制作的一个简单的HTML网页
12-20
自己制作的一个简单的HTML网页
用Html所做的简单网页
03-08
一个用Div+css所做的的的简单Html网页
世上最简单的网页.html
11-15
我头一次自学网页编码，献丑了，用的是html编码哟 (*^__^*) 嘻嘻……
html网页制作
12-12
网页下拉，菜单，邮箱 凑够五十字节我该写点什么呢，真费劲
html 制作简单网页
付某人的博客
04-20 1967
<!doctype html> <html> <head> <meat charset="utf-8" /> <title>华语乐坛</title> </head> <body> ...
html简单的网页制作
weixin_53468039的博客
10-28 6241
html制作简单的网页
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值