PC端企业类型整页制作

最新推荐文章于 2024-04-08 14:09:27 发布
最新推荐文章于 2024-04-08 14:09:27 发布
阅读量105 收藏
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57138526/article/details/126074464
版权

PC端的布局

通栏

自适应浏览器的宽度

版心

固定一个宽度，并且让容器居中

源码

HTML源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        #banner{position:relative;}
        #banner .banner_list{width:100%; height:469px; position:relative;}
        #banner .banner_list li{width:100%; height:100%; background:center 0 no-repeat;
            position:absolute; left:0; top:0; opacity:0; z-index:1;
        }
        #banner .banner_list li.active{opacity:1; z-index:10;}
        #banner .banner_list a{display:block; width:100%; height:100%;}
        #banner .banner_btn{width:100%; position:absolute; bottom:19px; z-index:20; font-size:0;
            text-align:center;
        }
        #banner .banner_btn li{display:inline-block; width:12px; height:12px; border:2px solid white;
            border-radius:50%; box-sizing:border-box; margin:0 6px; cursor:pointer;
        }
        #banner .banner_btn li.active{background:white;}


        #service{overflow:hidden; min-height:407px;}
        #service .service_list{text-align:center; margin-top:34px;}
        #service .service_list li{float:left; width:250px; margin:0 10px;}
        #service .service_list div{width:102px; height:102px; margin:0 auto;}
        /*#service .service_list li:nth-of-type(1) div{background-image:url(./images/web1.png);}*/
        /*#service .service_list li:nth-of-type(2) div{background-image:url(./images/graphic1.png);}*/
        /*#service .service_list li:nth-of-type(3) div{background-image:url(./images/e-bussiness1.png);}*/
        /*#service .service_list li:nth-of-type(4) div{background-image:url(./images/mail1.png);}*/
        #service .service_list h3{font-size:18px; color:#434343; line-height:36px; margin-top:25px;}
        #service .service_list p{font-size:14px; color:#6D6D6D; line-height:22px;}


        #case{background:#f8f8f8;}
        #case .container{min-height:460px; overflow:hidden;}
        #case .area_title{margin-top:55px;}
        #case .area_title h2{color:#66C5B4;}
        #case .case_list{margin-top:28px;}
        #case .case_list li{float:left; width:340px; margin:0 10px;}
        #case .case_btn{width:176px; height:37px; background:#66C584; margin:0 auto;
            border-radius:15px; line-height:37px; text-align:center;font-size:14px;
            margin-top:36px;
        }
        #case .case_btn a{display:block; width:100%; height:100%; color:white;}


        #news{min-height:450px; overflow:hidden;}
        #news .area_title{margin-top:65px;}
        #news dl{margin-top:48px;}
        #news dt{width:234px;}
        #news dd{width:846px;}
        #news .news_list{width:100%;}
        #news .news_list li{width:50%; float:left; margin-bottom:48px;}
        #news .news_date{width:71px; height:70px; border-right:1px solid #DCDCDC;
            text-align:center;
        }
        #news .news_date i{color:#66C5B4; font-size:39px; display:block; font-weight:bold;}
        #news .news_date span{color:#999999;font-size:20px; line-height:36px;}
        #news .news_text{width:310px; margin-left:20px;}
        #news .news_text h3{font-size:14px;}
        #news .news_text h3 a{color:#3F3F3F;}
        #news .news_text p{color:#A4A4A4; font-size:12px; line-height:21px; margin-top:17px;}
    </style>
</head>
<body>
    <div id="head" class="container">
        <div class="head_logo l">
            <a href="#">
                <img src="./images/logo.png" alt="博文尚美" title="博文尚美">
            </a>
        </div>
        <ul class="head_menu r">
            <li>
                <a href="#">HOME</a>
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
            <li>
                <a href="#">PROTFOLIO</a>
            </li>
            <li>
                <a href="#">SERVICE</a>
            </li>
            <li>
                <a href="#">NEWS</a>
            </li>
            <li>
                <a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
    <div id="banner" class="container-fluid">
        <ul class="banner_list">
            <li class="active" style="background-image:url(./images/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image:url(./images/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image:url(./images/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image:url(./images/banner.png)">
                <a href="#"></a>
            </li>
        </ul>
        <ol class="banner_btn">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div id="service" class="container">
        <div class="area_title">
            <h2>服务范围</h2>
            <p>OUR SERVICES</p>
        </div>
        <ul class="service_list">
            <li>
                <div style="background-image:url(./images/web1.png)"></div>
<!--                1.WEB DESIGN-->
                <h3>1.web desin</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div style="background-image:url(./images/graphic1.png)"></div>
<!--                2.GRAPHIC DESIGN-->
                <h3>2.graphic design</h3>
                <p>
                    标志LOGO设计/产品宣传册设计
                    <br>
                    企业广告/海报设计
                </p>
            </li>
            <li>
                <div style="background-image:url(./images/e-bussiness1.png)"></div>
<!--                3.E-BUSINESS PLAN-->
                　<h3>3.e-business plan</h3>
                <p>
                    淘宝/天猫装修设置及运营推广
                    <br>
                    企业微博、微信营销
                </p>
            </li>
            <li>
                <div style="background-image:url(./images/mail1.png)"></div>
<!--                4.MAILBOXAGENTS-->
                <h3>4.mailboxagents</h3>
                <p>
                    腾信/网易企业邮箱品牌代理
                    <br>
                    个性化邮箱定制开发
                </p>
            </li>
        </ul>
    </div>
    <div id="case" class="container_fluid">
        <div class="container">
            <div class="area_title">
                <h2>{ 客户案例 }</h2>
                <p>With the best professional technology, to design the best innovative web site</p>
            </div>
            <ul class="case_list clear">
                <li>
                    <a href="#">
                        <img src="./images/20141121095528549.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/20141121095216750.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/20141121105856226.png" alt="">
                    </a>
                </li>
            </ul>
            <div class="case_btn">
                <a href="#">VIEW　MORE</a>
            </div>
        </div>
    </div>
    <div id="news" class="container">
        <div class="area_title">
            <h2>最新资讯</h2>
            <p>THE LATEST NEWS</p>
        </div>
        <dl>
            <dt class="l">
                <img src="./images/xs1.png" alt="">
            </dt>
            <dd class="l">
                <ul class="news_list">
                    <li>
                        <div class="news_date l">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3>
                                <a href="#">
                                    网站排名进入前三的技巧说明
                                </a>
                            </h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                            首页,更不用说进首页前三了。那么网站优..</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>08</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3>
                                <a href="#">
                                    flash网站制作的优缺点
                                </a>
                            </h3>
                            <p>虽然HTML5程序语言出现,大有逐渐代替flash网站的趋势
                            但是过于生硬的HTML5动画效果,始终...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>07</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3>
                                <a href="#">
                                    做个网站多少钱
                                </a>
                            </h3>
                            <p>"做个网站多少钱?"很多客户打电话过来直接第一句九抛
                            出来的问题.就好比买辆车多少钱,你是要...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>06</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3>
                                <a href="#">
                                    哪些网站优化手法属于网站过度优化
                                </a>
                            </h3>
                            <p>大部分人都想让自己的网站,一夜之间出现在搜索引擎首页
                            独占鳌头,但是事实告诉我们罗马不是...</p>
                        </div>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>
    <div id="foot" class="container-fluid">
        <div class="container">
            <p class="l">Copyright 2006 - 2014 Bowenshangmei Culture All Rights Reserved</p>
            <div class="r">
                <a href="#">Home</a> |
                <a href="#">About</a> |
                <a href="#">Portfolio</a> |
                <a href="#">Contact</a>
            </div>
        </div>
    </div>
</body>
</html>

CSS源码

*{margin:0; padding:0;}
ul,ol{list-style:none;}
img{display:block;}
a{text-decoration:none; color:#646464;}
h1,h2,h3{font-size:16px;}
body{font-family:Arial;}

.l{float:left;}
.r{float:right;}
.clear:after{content:""; display:block; clear:both;}
/*版心*/
.container{width:1080px; margin:0 auto; position:relative;}
/*通栏*/
.container-fluid{width:100%;}


#head{height:81px;}
#head .head_logo{width:162px; height:44px; margin-top:19px;}
#head .head_menu{font-size:14px; line-height:81px;}
#head .head_menu li{float:left; margin-left:58px;}

.area_title{margin-top:60px; text-align:center;}
.area_title h2{height:20px; line-height:20px; font-size:20px; color:#363636;
    background:url(../images/title_bg.png) no-repeat center 7px; font-weight:normal;''
}
.area_title p{color:#9F9F9F; font-size:14px; line-height:34px;}

#foot{background:#66c5b4;}
#foot .container{height:54px; line-height:54px; font-size:12px; color:white;}
#foot div a{color:white; margin:0 10px;}

运行结果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

tong666ge
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS之PC端网页特效案例
qq_46655844的博客
07-27 231
学习黑马JS的PC端案例
千峰WebPC端页面制作案例
qq_52781485的博客
07-09 639
无
PC端网页特效案例
qq_52476758的博客
12-16 218
PC端网页特效案例 1. 获得鼠标在盒子内的坐标 <style> .box { width: 300px; height: 300px; background-color: pink; margin: 200px; } </style> <body> <div class="box"></div>
15个精美PC/手机端自响应网页设计案例与欣赏
weixin_30294295的博客
10-15 432
随着iphone的普及，越来越多网站都要制作一个单独的mobile端，而主体风格又要与电脑端完全一致。收集了25个精美网站，均是手机/电脑自响应的网站案例。 1.Maryland Craft Beer Festival 2.Daniel Vane 3.Inspire Conference 4.Formfett 5.Forefathers Group 6.D...
PC 端网页特效-offset 系列及学习案例
GoldenaArcher的博客
05-26 978
PC 端网页特效-offset 系列及学习案例 学习地址还是在这里：JavaScript 基础语法-dom-bom-js-es6 新语法-jQuery-数据可视化 echarts 黑马 pink 老师前端入门基础视频教程(500 多集)持续 总归说学完一个是一个，不能继续下次一定了 offset 即 元素偏移量，PC 端的网页特效是一个系列： offset client scroll 动画函数封装 不过因为每周学习的进度关系，所以会将 PC 端网页特效做一个系列的笔记。 其学习案例有 3 个： 基
三个制作精美的PC端登录页面
10-11
在IT行业中，设计一个美观且功能完备的PC端登录页面是至关重要的，它不仅能够提升用户的使用体验，还能展示品牌形象。本次我们关注的资源包含了三个精心制作的PC端登录页面，通过HTML和CSS技术实现。下面我们将深入...
Web-前端html+css从入门到精通 105. PC端游戏类型整页制作（6）.zip
05-23
PC端游戏类型整页制作（6）”将带你深入学习如何利用HTML和CSS构建一个完整的PC端游戏类型的网页。这个课程可能包括以下几个核心知识点： 1. HTML基础：HTML（HyperText Markup Language）是网页内容的基础，用于...
web移动端,PC端页面分享
01-28
PC端打开： 微信二维码弹窗提示分享,微博,qq分享跳到对应分享页。 移动端分享： 在qq,微信app打开时,因两者都不支持自定义按钮分享，所以都是提示点击右上角分享。 其他浏览器打开则调起对应qq、微信、微博app...
基于Vue的前端PC端设计源码
最新发布
06-01
本源码是基于Vue开发的前端PC端设计，包含408个文件，其中145个.png文件，72个.svg文件，47个.vue文件，41个.js文件，37个.css文件，33个.jpg文件，8个.scss文件，3个.html文件，以及3个.woff和3个.ttf文件。...
vue实现PC端分辨率适配操作
10-15
在开发Web应用时，尤其是针对PC端，确保页面在不同分辨率的显示器上具有良好的视觉体验是非常重要的。Vue.js，作为一款流行的前端框架，提供了多种方式来实现分辨率适配。本篇文章将详细介绍如何在Vue项目中实现PC端...
PC端完整版商城模板在线商城静态页面
06-11
PC端完整版商城模板在线商城静态页面。包括首页、详情页、列表页、个人中心页等五十多个页面
box-office:千峰三阶段项目-vue-卖座
03-31
票房 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
PC端网页的基本构成
weixin_30912051的博客
05-24 1409
　　　首先，一个前端最基本的就是排网页，有人会看不起拍页面，认为不就是排一个页面嘛，有啥的，分分钟的事，可是他不知道的是，一个网页中也包含了很多内容，像我们如果不理解margin，padding，会经常对我们的页面造成困扰。 　　　言归正传，一个网页，由三个层构成：结构层（html）、表现层（css）、行为层（js）。接下来我们分别来介绍一下，以及我们在页面中怎么用和链接进页面。 　　　1&g...
前端页面开发浅谈：PC 端设计如何“完美，2024年最新基于微信小程序设计与实现
tencentes的博客
04-08 869
在以下我们分别从布局、编码、流程和目标方面对 H5 页面的注意事项进行一个总结。
Web前端4
m0_74232590的博客
11-18 778
Web前端学习
HTML-CSS静态页面实现-仿博文尚美首页
weixin_44730244的博客
04-26 926
HTML代码： <!DOCTYPE html> <html> <head> <!-- https://www.17sucai.com/preview/330046/2015-08-19/%E5%8D%9A%E6%96%87%E5%B0%9A%E7%BE%8E/index.html https://www.zcool.com.cn/work/ZNjIzOTEwNA==.html?switchPage=on --> <meta ch
页面中查询模块的设计与实现思路
cooldream2009的博客
10-22 8406
页面中查询模块的设计与实现思路   在做一个物品的展示管理页面，想把增删改查都放到页面中，用axure画了一个页面，比较简单，主要分为上下两部分，上半部分是查询模块，下半部分是表格，用来展示数据。新增按钮单独在页面中，修改按钮在表的每一行数据后面，删除按钮在表格下面，将表格中的数据每一行设为可选，选择后进行删除操作。查询部分没有考虑很多，只是列了几个物品的主要属性，有下拉框有文本框，可选可填，然后...
web界面设计（一）
this is my
12-01 9814
Web界面设计 一 指引客户 1.令人心动的第一映像 发现页面布局 不是你选择页面布局，而是它选择你 引导客户的视线 利用对角线原则 使用色彩来吸引用户  重点使用反色或者深色表示 凸显个性 可以使用符号来统一设计风格 logo 2.导航之道 告诉软件应该做什么 设计菜单不应该基于对象，还是基于任务（动宾词） 链接生来不平等 标签抬起头来看路 二 学习 1 开
web网页制作
lgt23456的博客
12-29 1238
生活习性页面的蓝色与土色搭配，历史文化与分布范围页面的橘黄搭配，形态特征的浅蓝白搭配，以及驯养方式，主要行为的浅蓝浅绿搭配，带给人们一种简单爽约的感觉，每个页面对狗狗的描述都有文字加图片，形态特征中加入一个轮播图的技术，最后主要行为以一个感人的音频结束，简单不单调。进入页面后，首页通过一个视频让我们对可爱的拉布拉多有一个小小的认识，然后一段文字简单介绍后，可以通过导航栏直接进入自己感兴趣的版块，如果还不太了解，也可以在“狗狗咨讯”中先了解一下，然后跳转页面充分了解。通过点击两侧的切换按钮进行照片的切换。
PC 端进行移动页面的制作
05-17
要在 PC 端制作移动页面，你可以使用响应式设计或者移动优先设计来实现。以下是一些实践建议： 1. 使用视口（viewport）标签：在 head 标签中添加 `<meta>` 标签，设置视口的宽度和缩放比例，让页面适应不同大小的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值