HTML实例

最新推荐文章于 2024-05-24 23:45:01 发布
最新推荐文章于 2024-05-24 23:45:01 发布
阅读量295 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ly925816185/article/details/108861107
版权

在这里插入图片描述

<!DOCTYPE html>
<hrml lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css"> 
</head>
<body>
    <!-- header -->
    <div class="header center">
        <div class="logo fl">
            <img src="./images/logo.png" alt="">
        </div>
        <ul class="nav fr">
            <li><a href="">HOME</a></li>
            <li><a href="">ABOUT</a></li>
            <li><a href="">PROTFOLIO</a></li>
            <li><a href="">SERVICE</a></l
            <li><a href="">NEWS</a></li>
            <li><a href="">CONTACT</a></li>
        </ul>
    </div>
    <div class="banner">
        <ul>
            <li>
                <img src="./images/banner.png" alt="">
            </li>
        </ul>
        <ol class="banner-list">
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div class="section1">
        <div class = "section-header">
            <div class="section-header-box">
                <div class="section-header-left"></div>
                <div>服务范围</div>
                <div class="section-header-right"></div>
            </div>
            <p class="section-header-title">our services</p>
        </div>
    </div>
    <div class="section1-content clearfix center">
        <div class="list">
            <img src="./images/section1-img1.png" alt="">
            <p class="text1">1.WEB DESIGN</p>
            <p class="text2">企业品牌网站设计/手机网站制作动画网站创意设计</p>
        </div>
        <div class="list">
            <img src="./images/section1-img2.png" alt="">
            <p class="text1">1.WEB DESIGN</p>
            <p class="TEXT2">标志logo设计/产品宣传册设计企业广告/海报设计</p>
        </div>
        <div class="list">
            <img src="./images/section1-img3.png" alt="">
            <p class="text1">1.WEB DESIGN</p>
            <p class="text2">淘宝/天猫装修设计及运营推广企业微博、微信营销</p>
        </div>
        <div class="list">
            <img src="./images/section1-img4.png" alt="">
            <p class="text1">1.WEB DESIGN</p>
            <p class="text2">腾讯/网易企业邮箱品牌代理个性化邮箱定制开发</p>
        </div>
    </div>
    <div class="section2">
        <div class="section-header">
            <div class="section-header-box">
                <div class="section-header-left"></div
                <div>&nbsp;{&nbsp;客户案例&nbsp;}&nbsp;</div>
                <div class="section-header-right"></div>
        </div>
        <p class="section-header-title">With the best professional technology, to design the best innovative web site</p>
    </div>
    <div class="section2-content center clearfix">
        <div class="list">
            <img src="./images/section2.png" alt="">
        </div>
        <div class="list">
            <img src="./images/section2.png" alt="">
        </div>
        <div class="list">
            <img src="./images/section2.png" alt="">
            </div>
        </div>
        <a href=""class="more">VIEW MORE</a>
    </div>
    <div class="section3">
        <div class = "section-header">
            <div class="section-header-box">
                <div class="section-header-left"></div>
                <div>最新资讯</div>
                <div class="section-header-right"></div>
            </div>
            <p class="section-header-title">TEH LATEST NEWS</p>
        </div>
        <div class="section3-content clearfix center">
            <div class="section3-left fl">
                <img src="./images/section3.png" alt="">
            </div>
            <div class="section3-right fr">
                <div class="section3-right-box1 clearfix">
                    <div class="section3-right-item fl">
                        <div class="section3-right-left fl">
                            <div class="number">09</div>
                        Jan
                        </div>
                        <div class="section3-right-right fl">
                        <p class="p1">网站排名进入前三的技巧说明</p>
                        <p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎手首页，更不用说进首页前三了。那么网站优化....</p>
                        </div>
                    </div>
                <div class="section3-right-item fl">
                    <div class="section3-right-left fl">
                        <div class="number">09</div>
                        Jan
                    </div>
                    <div class="section3-right-right fl">
                        <p class="p1">网站排名进入前三的技巧说明</p>
                        <p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎手首页，更不用说进首页前三了。那么网站优化....</p>
                        </div>
                    </div>
               </div>
               <div style="position: absolute; left: 900px;top: 1697px;width: 500px;">
               <div class="section3-right-box2 clearfix">
                <div class="section3-right-item fl">
                    <div class="section3-right-left fl">
                        <div class="number">09</div>
                        Jan
                    </div>
                    <div class="section3-right-right fl">
                        <p class="p1">网站排名进入前三的技巧说明</p>
                        <p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎手首页，更不用说进首页前三了。那么网站优化....</p>
                    </div>
                </div>
                <div class="section3-right-item fl">
                    <div class="section3-right-left fl">
                        <div class="number">09</div>
                        Jan
                    </div>
                    <div class="section3-right-right fl">
                        <p class="p1">网站排名进入前三的技巧说明</p>
                        <p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎手首页，更不用说进首页前三了。那么网站优化....</p>
                        </div>
                    </div>
               </div>
            </div>
            </div>
        </div>
    </div>
</body>
</hrml>

在这里插入图片描述
在这里插入图片描述
*{
padding: 0;
margin: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
img{
display: block;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix::after{
content: “”;
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.center{
width: 1090px;
margin: 0 auto;
}
.header{
height: 60px;
padding-top: 20px;
}
.header .logo{
width: 167px;
height: 44px;
}
.header .nav{
width: 690px;
height: 44px;
color: #646464;
font-size: 14px;
}
.header .nav>li{
float: left;
margin-left:50px;
line-height: 44px;

}
/banner/
.banner{
position: relative;
}
.banner > ul img{
width: 100%;
}
.banner .banner-list{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.banner .banner-list li{
height: 8px;
width: 8px;
border-radius: 50%;
border: 2px solid #fff;
float: left;
margin: 0 6px;
}
.banner .banner-list .active{
background-color: #fff;
}
/* section 部分公共杨头部*/
.section-header{
text-align: center;
}
.section-header-box{
width: 350px;
margin: 0 auto;
position: relative;
font-size: 20px;
color: #363636;
}
.section-header-box .section-header-left,.section-header-right{
width: 100px;
height: 1px;
position: absolute;
top: 15px;
background: #c3c3c3;
}
.section-header-box .section-header-right{
right: 0;
}
.section-header-left::after,.section-header-right::after{
content: “”;
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
background: #3c3c3c;
top: -4px;
}
.section-header-left::after{
right: 0;
}
.section-header-right::after{
left: 0;
}
.section-header .section-header-title{
color: #3c3c3c;
font-size: 14px;
margin-top: 10px;
}
/section1的内容/
.section1 .section-header{
padding: 60px 0 50px 0;
}
.section1-content > .list{
width: 25%;
float: left;
height: 280px;
text-align: center;
}
.section1-content >.list img{
margin: 0 auto;
display: block;
}
.section1-content >.list .text1{
font-size: 18px;
color: #434343;
padding: 30px 0 20px 0;
font-weight: 700;
}
.section1-content >.list .text2{
font-size: 14px;
color: #6d6d6d;
width: 205px;
margin: 0 auto;
}
/section2/
.section2{
background: #f8f8f8;
padding-bottom: 65px;
}
.section2-content{
padding-left: 5px;
width: 1085px;
}
.section2 .section-header-box{
color:#66c5b4;
}
.section2-content .list{
float: left;
margin: 0 10px;
}
.section2 .more{
display: block;
margin: 0 auto;
text-align: center;
width: 178px;
line-height: 38px;
background: #66c5b4;
color: #fff;
font-size: 14px;
border-radius: 100px;
margin-top: 37px;
}
.section2 .section-header{
padding: 55px 0 40px 0;
}

/* section3*/
.section3{
padding-bottom: 88px;
}
.section3 .section-header{
padding: 65px 0 55px 0;
}
.section3-right{
width: 856px;
}
.section3-content .section3-left img{
width: 234px;
}
.section3-right-left{
color: #999999;
font-size: 20px;
width: 73px;
height: 71px;
border-right: 1px solid #dcdcdc;
text-align: center;
}
.section3-right-left .number{
font-size: 39px;
color: #66c5b4;
font-weight: 700px;
}
.section3-right-right{
width: 328px;
padding: 18px;
}
.section3-right-right .p1{
font-size: 14px;
color: #3f3f3f;
}
.section3-right-right .p2{
font-size: 12px;
color: #a4a4a4;
padding-top: 19px;
}
.section3-right-box1{
padding-bottom: 40px;
}

liYang'
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序onLaunch异步,首页onLoad先执行?
10-18
主要介绍了微信小程序onLaunch异步,首页onLoad先执行? 文章底部给大家介绍了小程序_onLaunch异步回调数据加载问题的两种解决方案，需要的朋友可以参考下
微信小程序onLaunch异步，首页onLoad先执行怎么解决?
呓语的风的技术博客
09-17 3315
本来按照事件顺序，小程序初始化时触发App里的onLaunch，后面再执行页面Page里的onLoad，但是在onLaunch里请求获取是否有权限，等待返回值的时候Page里的onLoad事件就已经执行了。 要是能等完onLaunch请求完再执行Page的onLoad方法那该多好。 这里采用的方法是定义一个回调函数。 原文链接：https://www.jianshu.com/p/aaf6562...
小程序php没执行完,微信小程序onLaunch执行完之后再执行onLoad
weixin_36335903的博客
03-26 318
按照事件顺序，小程序初始化时触发App里的onLaunch，后面再执行页面Page里的onLoad，但是在onLaunch里请求获取是否有权限，等待返回值的时候Page里的onLoad事件就已经执行了。//app.jsApp({onLaunch: function () {console.log('onLaunch');wx.request({url: 'test.php', //仅为示例，并非真...
uni-app 中利用 Promise 实现 onLaunch 异步回调后执行 onLoad
不明所以
07-30 2411
问题描述 app.vue里的onLaunch中如果有异步方法，返回结果可能会在页面的 onLoad 之后，为了让页面的 onLoad 在 onLaunch 之后执行，使用以下解决方案 解决方案 步骤1 在 main.js 中增加如下代码： Vue.prototype.$onLaunched = new Promise(resolve => { Vue.prototype.$isResolve = resolve }) 步骤2 在 App.vue 的 onLaunch 中增加代码 this.$
微信小程序onlaunch异步，首页onLoad先执行？
weixin_30877181的博客
03-20 1172
按照原理是小程序初始化时会先触发APP里的onLaunch事件，之后再执行页面Page里的onLoad事件。但实际请求时在onLaunch事件中请求获取数据，等待返回值的时候Page里的onLoad事件已经执行结束了。 解决办法是： 定义一个回调函数 page页面判断一下当前定义的变量是否有值，如果没有（第一次）则定义一个APP方法（回调函数） APP页面在请求成功后判断是否有page页面...
html.rar_html实例
09-22
对html的学习很有帮助，包含有关html的比较全的实例
Html-and-css.rar_html实例
09-23
介绍html和css的，并有实例说明，希望对大家有帮助
30个超简单html实例带你入门
09-04
总结了哔哩哔哩黑马程序员的html教程，只要掌握了这几个实例，基本上就可以开发出一个超简单的网页了，如果想要进一步美化页面，请移步下载我的另一个css实例。
jessibuca-demo html 实例
03-21
jessibuca-demo html 实例
仿百度天气预报样式的echart静态html实例
05-25
仿百度天气预报样式的echart静态html实例，是一款仿百度天气预报的静态页面，用到了html、echart、query等技术。
微信小程序之onLaunch与onload异步问题详解
10-17
主要介绍了微信小程序之onLaunch与onload异步问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp 先执行onLaunch，再执行onLoad
LP的博客
08-10 2730
uni-app 中利用 Promise 实现 onLaunch 异步回调后执行 onLoad
解决问题：微信小程序生命周期onLunch可能在onLoad之后加载
chen449757520的博客
10-16 655
生命周期onLunch在有网络请求的情况下，可能在onLoad之后才后 if(this.userInfoReadyCallback){ this.userInfoReadyCallback(res) }
微信小程序回调解决单个页面生命周期在onLaunch之前执行
Willow_Spring的博客
12-15 1683
有很多情况，要在onLaunch中进行网络请求 onLaunch是异步的，导致很多页面已经执行了onshow方法，拿不到全局变量 这里用回调解决 要回调的页面 //已经登陆 if(wx.getStorageSync('sessionId')){ this.getQuest(questionnaireId) }else{ //网络原因，还没有拿到登陆数据，这里调用全局的callback getApp(
解决微信小程序onLaunch与onload执行顺序问题
奇葩也是花
03-16 7610
问题产生： 准备使用微信小程序去获取openid，把获取openid的代码写在app.js的onlaunch中。想在后续的页面中使用openid，结果在页面中打印出来显示是和预期的不太一样： // APP.JS var ApiList = require('utils/api.js'); App({ onLaunch: function () { // // 展示本地存储能力 ...
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 208
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1023
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）
最新发布
2301_79969279的博客
05-24 577
好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下。
jwplayer.flash.swf html 实例
01-11
下面是一个使用jwplayer.flash.swf的HTML实例： ```html <!DOCTYPE html> <html> <title>JWPlayer Flash SWF HTML实例 <script src="https://content.jwplatform.com/libraries/abcdefgh.js"></script> <!-- ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值