005-网页应用开发WebApplicationDevelopment（二）

最新推荐文章于 2019-12-11 05:57:40 发布
最新推荐文章于 2019-12-11 05:57:40 发布
阅读量232 收藏
点赞数
分类专栏： WebApp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33781658/article/details/102492468
版权

 

 

 

 

 

我们来模仿一下Google的网页作为练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Google</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="d01">
    <p class="p01">About</p>
    <p class="p01">Store</p>

    <img class="img01" src="head.jpg" alt="">
    <p class="p02">Images</p>
    <p class="p02">Gmail</p>
</div>

<div class="d02">
    <img class="img02" src="logo.png" alt="">
    <div class="d04">
        <img class="img03" src="search.jpg" alt="">
    </div>
</div>

<div class="d03"></div>
</body>
</html>

 

然后来看一下css

 


body {
    margin: 0px;
    padding: 0px;
}

.d01 {
    height: 80px;
}

.p01 {
    display: inline-block;
    font-size: 13px;
    color: #666;
    margin-left: 20px;
    margin-top: 20px;
}

.img01 {
    width: 40px;
    height: 40px;
    float: right;
    margin: 20px;
}

.p02 {
    float: right;
    margin-right: 20px;
    margin-top: 30px;
    font-size: 13px;
    color: #666;
}

.d02 {
    height: 530px;
    text-align: center;
}

.d03 {
    height: 110px;
    background-color: #ddd;
}

.img02 {
    width: 275px;
    margin-top: 100px;
}

.img03 {
    width: 600px;
}

.d04{
    text-align: center;
}

 

 

然后我们来看一下效果图

 

 

 

还是挺像的

 

 

 

 

 

 

 

 

然后我们可以来模仿一下Apple的官网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Apple</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="d01">
    <div class="d02">
        <img class="img01" src="apple.png" alt="">

        <ul class="ul01">
            <li>Mac</li>
            <li>iPad</li>
            <li>iPhone</li>
            <li>Watch</li>
            <li>TV</li>
            <li>Music</li>
            <li>Support</li>
        </ul>

        <img class="img02" src="apple.png" alt="">
        <img class="img02" src="apple.png" alt="">
    </div>


</div>
<div class="d03">
    <p class="p01">iPhone 11 Pro</p>
    <p class="p02">Pro cameras. Pro display. Pro performance.</p>
    <p class="p03">From ￡759 with trade-in.</p>
    <p class="p03">From ￡30.99/mo. with trade-in at an Apple Store.</p>
    <img class="img03" src="phone.jpg" alt="">
</div>
<div class="d04">
    <p class="p04">iPhone 11</p>
</div>
</body>
</html>

 

然后是CSS

 

* {
    padding: 0px;
    margin: 0px;
}

.d01 {
    height: 60px;
    background-color: #313131;
}

.d02 {
    width: 1024px;
    margin: 0 auto;
}

.img01 {
    width: 40px;
    display: block;
    float: left;
    margin-top: 10px;
}

.ul01 li {
    color: #fff;
    display: block;
    float: left;
    margin-left: 70px;
    line-height: 58px;
    font-size: 13px;
}

.img02 {
    width: 40px;
    display: block;
    float: left;
    margin-top: 10px;
    margin-left: 60px;
}

.d03 {
    height: 550px;
    background-color: black;
    text-align: center;
}

.p01 {
    color: white;
    font-size: 60px;
    padding-top: 40px;
}

.p02 {
    color: white;
    font-size: 30px;
}

.p03 {
    color: #999;
    font-size: 20px;
}

.img03 {
    width: 700px;
    margin-top: 50px;
}

.d04 {
    text-align: center;
}

.p04 {
    padding-top: 20px;
    color: black;
    font-size: 60px;
}

 

 

然后我们来看下效果

 

 

 

也挺像的,还是不错的

 

 

 

 

 

 

 

 

 

 

Lich Howger
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebApplicationDevelopment:605.782 Java Web 应用程序开发
07-11
【描述】"网络应用开发 605.782 Java Web 应用程序开发" 暗示了这是一个深入学习Java Web开发的课程，可能涵盖了从基础到高级的主题，包括HTTP协议、Servlets、JSP（JavaServer Pages）、MVC（Model-View-Controller...
WebApplicationDevelopment_Midterm:这是存储Chung Minh Nhat为WAD中期项目交付的源代码的存储库-web development source code
03-25
总结，"WebApplicationDevelopment_Midterm"项目提供了一个实践性的Web开发示例，涵盖了前端HTML/CSS布局和后端Java/JSP逻辑，是学习和研究Web应用开发的良好资源。对于初学者和经验丰富的开发者，都能从中获取有...
038-网页应用开发WebApplicationDevelopment（十）
Lich Howger
12-11 135
网页应用开发WebApplicationDevelopment（十） 网页应用开发WebApplicationDevelopment（十） Simple JS const data_array = []; // Function to ensure parameters used in request are encoded correctly const enc...
008-网页应用开发WebApplicationDevelopment（三）
Lich Howger
10-17 250
Responsive Web Design响应式网页设计 一个建筑的基础决定了它的足迹,决定了它的框架和外观.建筑的阶段更加不可变.创造性的想法能决定物理形态. 创造网页是一件完全不同的事情.我们的工作是被短暂决定的,而且可能一年两年就被更换了. 现在移动端比电脑更加活跃,而且现在有越来越多不同的设备.我们需要为每个设备设计一个网页吗,不可能的.那么我们...
034-网页应用开发WebApplicationDevelopment（九）
Lich Howger
12-11 133
网页应用开发WebApplicationDevelopment（九） 先来介绍一下不同类型的response code 1xx informational 2xx success 3xx redirection 4xx client error 5xx server error 然后我们来搞服务器代码 装一下node.js windo...
000-网页应用开发WebApplicationDevelopment（一）
Lich Howger
10-03 432
HTML,CSS,JavaScript HTML is the language used to describe the structure and content of our webpage. It is not concerned with presentation or how the webpage will ultimately look, it is more foc...
018-网页应用开发WebApplicationDevelopment（六）
Lich Howger
11-08 152
JavaScript 先来写个最简单的js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="function.js"&gt...
027-网页应用开发WebApplicationDevelopment（八）
Lich Howger
11-20 170
OK Now we are going to learn Web Development. API Application Programming Interface An API specifies some form of software or hardware interation, in terms of 1.Inputs 2.Processe...
021-网页应用开发WebApplicationDevelopment（七）
Lich Howger
11-12 164
HTML表单form 写个最简单的表单 <body> <form method="get"> <input type="text"> <input type="password"> <input type="submit"> </form> </body> 一个...
015-网页应用开发WebApplicationDevelopment（五）
Lich Howger
11-01 212
我们来用js来写一个按钮控制菜单的功能 先来一个简单的布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ...
011-网页应用开发WebApplicationDevelopment（四）
Lich Howger
10-23 172
Flexbox 当一个元素,比如div display: flex的时候 就成为了一个flex容器 看看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &...
基于ssm和vue的 家庭理财系统源码 家庭理财系统代码（高分毕设项目源码）
08-23
1. 家庭理财系统代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：前端是vue，后端是ssm，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
大数据湖体系规划与建设方案.pdf
08-23
大数据湖体系规划与建设方案.pdf
Kafka多租户消费：构建高效、安全的分布式消息处理
08-23
Kafka是一个分布式流处理平台，最初由LinkedIn公司开发，后来成为Apache软件基金会的一个顶级项目。Kafka主要用于构建实时数据管道和流处理应用程序。它能够高效地处理高吞吐量的数据流，并且具有很好的可扩展性、容错性和持久性。 以下是Kafka的一些关键特性： 1. **分布式系统**：Kafka通过多个代理（Broker）组成集群，支持数据的分布式存储和并行处理。 2. **发布-订阅模型**：Kafka使用发布-订阅模式，生产者（Producer）将消息发布到主题（Topic），消费者（Consumer）从主题订阅消息。 3. **高吞吐量**：Kafka设计用于处理高吞吐量的数据流，每秒可以处理数百万条消息。 4. **持久性**：Kafka将数据存储在磁盘上，支持数据的持久化，即使在系统故障的情况下也不会丢失数据。 5. **可扩展性**：Kafka可以通过增加更多的Broker来水平扩展，以处理更大的数据量。 6. **容错性**：Kafka支持数据的副本（Replication），确保数据的高可用性和容错性。 7. **实时性**：Kafka设计用于实时数据处理
containerd的配置文件
最新发布
08-23
【kubernetes】环境准备及K8S安装【最新完整版】 1./etc/containerd/ 2.更改真实对应的harbor镜像地址ip
海康网络设备 sdk开发
08-23
海康网络设备 sdk开发
基于springboot和vue的 网上订餐系统源码 （优秀毕业设计源码）
08-23
1. 网上订餐系统代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
精益与智能工厂三年规划.pdf
08-23
精益与智能工厂三年规划.pdf
weixin028小说阅读器+ssm.zip
08-23
当今时代，是信息大爆炸的时代，人们每天都能接收到数不清的各类信息，其形式不仅包含传统的文字和图片，还有视频、音频等多阅读资料源也较以往增长了太多。因此市面上各种阅读类应用的用户体验参差不齐，所以设计一个通用的阅读器，小说阅读器小程序采用java开发语言、以及Mysql数据库等技术。系统主要分为管理员和用户二部分，管理员服务端：首页、个人中心、用户管理、小说分类管理、书城管理、订单信息管理、小说资讯管理、小说章节管理、书圈、系统管理，用户客户端；首页、书城、小说资讯、书圈、我的等功能，基本上实现了整个小说阅读器小程序信息管理的过程。本系统在一般小说阅读器小程序的基础上增加了最新信息的功能方便用户快速浏览，是一个高效的、动态的、相互友好的小说阅读器小程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值