千峰WebPC端页面制作案例

已于 2022-09-11 22:46:28 修改
阅读量639 收藏 3
点赞数 1
文章标签： html css
于 2022-07-09 16:04:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52781485/article/details/125660512
版权

 制作如下界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0; padding: 0;}
         ul{list-style: none;}
         img{display: block;}
         a{text-decoration: none; color:white;}
         h1,h2,h3,h4,h5,h6{font-size: 16px;}

         #main{background-color: black;width: 1253px; height: 244px; margin:0 auto;z-index: 0;position: relative;}
         #main h2{color: white;margin-left: 7px;margin-top: 9px;margin-bottom: 18px; }
         #main img{width: 227px; height: 127px;border-radius:10px;}
         #main .box{float: left;}
         #main #outer1{margin-left: 7px;margin-right: 24px;}
         #main .outer{margin-right: 24px;}
         #main .content{height: 34px;line-height: 34px;font-size: 16px;bottom: -14px;text-align: left;}
         #main .c{text-indent: 7px;}
         #main .smallWord{color: #8c8c8c;} 
         #main .pic p{width: 36px; height: 20px; background: #fddc82;z-index: 1;color: #663d00;border-radius: 5px;text-align: center;}
         #main .pic .a{position: absolute;left: 194px;top: 45px;}
         #main .pic .b{position: absolute;left: 445px;top: 45px;}
         #main .pic .d{position: absolute;left: 695px;top: 45px;}
         #main .pic .e{position: absolute;left: 1197px;top: 45px;}
         #main .comment{z-index: 1;color: white;font-size: 14px;} 
         #main .comment .mhl{position: absolute; top:136px;left: 15px;}
         #main .comment .ry{position: absolute; top:136px;left: 270px;}
         #main .comment .ejz{position: absolute; top:136px;left: 522px;}
         #main .comment .zyq{position: absolute; top:136px;left: 772px;}
         #main .comment .lyj{position: absolute; top:136px;left: 1022px;}
    </style>
</head>
<body>
    <div id="main">
        <h2> 猜你会追</h2>
        <div class="box"> 
            <img src="../images/TX1.png" alt="" id="outer1">
            <a href="#"> <p class="c content">梦华录</p> </a>
            <p class="c smallWord">刘亦菲陈晓共闯大宋繁华</p>
        </div>
        <div class="box">
            <img src="../images/TX2.png" alt="" class="outer">
            <a href="#"> <p class="content">你是我的荣耀</p> </a>
            <p class="smallWord">杨洋迪丽热巴共谱浪漫爱情</p>
        </div>
        <div class="box">
            <img src="../images/TX3.png" alt="" class="outer">
            <a href="#"> <p class="content">二进制恋爱</p> </a>
            <p class="smallWord">庄达菲任宥纶鲜甜初恋</p>
        </div>
        <div class="box">
            <img src="../images/TX4.png" alt="" class="outer">
            <a href="#"> <p class="content">在一起</p> </a>
            <p class="smallWord">群星还原抗“疫”记忆</p>
        </div>
        <div class="box">
            <img src="../images/TX5.png" alt="">
            <a href="#"> <p class="content">老友记 第二季</p> </a>
            <p class="smallWord">美剧友情爱情天花板</p>
        </div>
        <div class="pic">
           <p class="a">VIP</p> 
           <p class="b">VIP</p>
           <p class="d">VIP</p>
           <p class="e">VIP</p>
        </div>
        <div class="comment">
            <span class="mhl"> 全40集 </span>
            <span class="ry">  全32集 </span>
            <span class="ejz"> 全24集 </span>
            <span class="zyq"> 全20集 </span>
            <span class="lyj"> 全24集 </span>
        </div>
    </div>
</body>
</html>

注意点：

  1. 利用padding调整图片位置时，给图片添加圆角border-radius无法正常显示效果，圆角只能显示在原来未移动位置的地方，相当于裁剪了；只能用改margin才能将四个部分的圆角设置在正确的位置。
  2. id值是唯一的且不能重复，如果要设置相同的名称，可以选择class
  3. 对margin与padding的理解：margin相当于给盒子的外部添加边距，padding是给盒子的内部添加边距，给一个盒子加padding会改变盒子内部东西摆放的位置，若padding设置的值过大，可能会造成内容溢出的现象。第一点中的情况，我们可以把盒子内部的图片当作一个小盒子，不加内外边距时，给图片添加圆角是可以看见的；当给图片设置了内边距padding时，改变了小盒子的大小，导致原来的小盒子不仅仅只是刚好存放一张图片，还多出来了一小段距离，此时我们再给图片添加圆角时，border-radius作用在变大的小盒子上而不是作用在小盒子内部的图片上了；而给图片添加外边距时，小盒子的大小并没有改变，border-radius作用在图片上。
  4. 对position中relative和absolute的理解：relative是相对于自身而言；absolute用于嵌套当中，是子类相对于父类的位置，一般在后面会加上top、right、left、bottom的值，这些值是以父类为参考来设置的。
  5. position的值为absolute、fixed的元素会脱离文档流，static、relative没有脱离文档流

PC端企业类：

 

                通栏：自适应浏览器的宽度。

                版心：固定一个宽度，并且让容器居中。

 

<ul>
        <li style="background-image: url(../images/TX1.png);">
            <a href="#">  </a>
        </li>
    </ul>
  • 可以对ul设置宽高，但只对ul设置宽高时，由于背景图片是加在li内的，所以最后的效果只有li默认大小的图片，要想获取整张图片，必须将ul和li设置一样的宽高或直接在ul中加img。

  • 在如上代码的条件下，只有将a标签转成块并添加宽高才能点击

  • <p>标签内的文本需要换行可以用<br>实现

<p> 企业品牌网站设计/手机网站制作
    <br>   <!-- <br>标签：自动换行 -->
    动画网站创意设计 </p>
  •  文字居中：text-align:center;        图片居中：在<div>内  margin:0 auto;
  • <li>中不能直接加<img>，解决方法是： 
    <li> <a href=""> <img src="" alt=""> </a> </li>

<p> <li> <img src="" alt=""> </li> </p>
  • <i>标签：

        ​​​​​​​        ​​​​​​​        

*{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;}
.clera: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(../bwsmpic/pic11.png) no-repeat center 5px;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;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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;top: 0;left: 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: 43px; z-index: 20; font-size: 0;text-align: center;}
        #banner .banner_btn li{display: inline-block; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; box-sizing: border-box; margin: 0 6px; cursor: pointer;}  /* cursor:光标 */
        #banner .banner_btn li.active{background: white;}
        

        #service{overflow: hidden; min-height: 407px;} /* 防止margin传递 */
        #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: 97px; height: 97px; margin: 0 auto;}
        #service .service_list li:nth-of-type(1) div{background-image: url(./bwsmpic/pic2.png);}
        #service .service_list li:nth-of-type(2) div{background-image: url(./bwsmpic/pic3.png);}
        #service .service_list li:nth-of-type(3) div{background-image: url(./bwsmpic/pic4.png);}
        #service .service_list li:nth-of-type(4) div{background-image: url(./bwsmpic/pic5.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 .case_title{margin-top: 55px;}
        #case .case_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: #66C5B4; margin: 0 auto;border-radius: 25px; text-align: center; line-height: 37px; font-size: 14px; margin-top: 236px;}
        #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: 80px; }
        #news .news_text h3{font-size: 14px;}
        #news .news_text 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="./bwsmpic/pic10.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(./bwsmpic/pic1.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./bwsmpic/pic1.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./bwsmpic/pic1.png);">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./bwsmpic/pic1.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> </div>
                <h3> 1.WEB DESIGN </h3>
                <p> 企业品牌网站设计/手机网站制作
                    <br>   <!-- <br>标签：自动换行 -->
                    动画网站创意设计 </p>
            </li>
            <li>
                <div> </div>
                <h3> 2.GRAPHIC DESIGN </h3>
                <p> 标志logo设计/产品宣传册设计
                    <br>   
                    企业广告/海报设计 </p>
            </li>
            <li>
                <div> </div>
                <h3> 3.E-BUSINESS PLAN </h3>
                <p>  淘宝/天猫装修设计及运营推广
                    <br>   
                    企业微博、微信营销 </p>
            </li>
            <li>
                <div> </div>
                <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="./bwsmpic/pic6.png" alt=""> </a>
                    </li>
                    <li>
                        <a href="#"> <img src="./bwsmpic/pic7.png" alt=""> </a>
                    </li>
                    <li>
                        <a href="#"> <img src="./bwsmpic/pic8.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="./bwsmpic/pic9.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">
                            <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">
                           <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">
                           <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">
                           <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>

PC端游戏类

好的船长�
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS之PC端网页特效案例
qq_46655844的博客
07-27 231
学习黑马JS的PC端案例
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>
Web前端大作业—— 饮食餐饮网站 咖啡网站pc端带轮播(5个页面)HTML+CSS+JavaScript 学生美食网页设计作品 学生餐饮文化网页模板
最新发布
专注于dreamweaver网页设计制作
06-02 648
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】 🧡 【
15个精美PC/手机端自响应网页设计案例与欣赏
weixin_30294295的博客
10-15 433
随着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端网页的基本构成
weixin_30912051的博客
05-24 1409
　　　首先，一个前端最基本的就是排网页，有人会看不起拍页面，认为不就是排一个页面嘛，有啥的，分分钟的事，可是他不知道的是，一个网页中也包含了很多内容，像我们如果不理解margin，padding，会经常对我们的页面造成困扰。 　　　言归正传，一个网页，由三个层构成：结构层（html）、表现层（css）、行为层（js）。接下来我们分别来介绍一下，以及我们在页面中怎么用和链接进页面。 　　　1&g...
[千峰教育]CMS.zip
05-21
千锋网络安全渗透测试Web架构安全分析章节配套的一个网站源码，用于安全渗透学习，名称为：文章管理系统。使用前需要先配置数据库，导入mysql文件。如有问题可联系我！我也是在学习中！其中 附赠 OWASP Top 10 2017 ...
网络安全工程师（千峰教育）笔记
11-03
b站的千峰老师的网络安全工程师的系列课程的笔记，自己整理的，pdf版本，内容包含day2--------day24。
千峰django基本操作笔记
12-05
https://blog.csdn.net/weixin_43249914/article/details/84792113 这是原文的图片格式，注意是mmap格式的文件，需要特定的软件打开才能使用
千峰UI框架
11-14
"千峰UI框架"是一个专为用户界面设计和开发打造的框架，旨在简化前端开发者的工作流程，提高开发效率。此框架包含丰富的组件和工具，帮助设计师实现美观且响应式的页面布局。"有代码注释"的特性表明该框架在源码层面...
千峰python课件笔记+源码 （凯哥）
07-24
------- 第一章： 千锋python基础 千锋python基础教程：1、第一个python程序与数据存储 '千锋python基础教程：2、print&input;与变量和运算符' 千锋python基础教程：3、字符串与循环中的while ...
PC端完整版商城模板在线商城静态页面
06-11
PC端完整版商城模板在线商城静态页面。包括首页、详情页、列表页、个人中心页等五十多个页面
box-office:千峰三阶段项目-vue-卖座
03-31
票房 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
前端页面开发浅谈：PC 端设计如何“完美，2024年最新基于微信小程序设计与实现
tencentes的博客
04-08 871
在以下我们分别从布局、编码、流程和目标方面对 H5 页面的注意事项进行一个总结。
Web前端4
m0_74232590的博客
11-18 778
Web前端学习
HTML-CSS静态页面实现-仿博文尚美首页
weixin_44730244的博客
04-26 927
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 8413
页面中查询模块的设计与实现思路   在做一个物品的展示管理页面，想把增删改查都放到页面中，用axure画了一个页面，比较简单，主要分为上下两部分，上半部分是查询模块，下半部分是表格，用来展示数据。新增按钮单独在页面中，修改按钮在表的每一行数据后面，删除按钮在表格下面，将表格中的数据每一行设为可选，选择后进行删除操作。查询部分没有考虑很多，只是列了几个物品的主要属性，有下拉框有文本框，可选可填，然后...
web界面设计（一）
this is my
12-01 9815
Web界面设计 一 指引客户 1.令人心动的第一映像 发现页面布局 不是你选择页面布局，而是它选择你 引导客户的视线 利用对角线原则 使用色彩来吸引用户  重点使用反色或者深色表示 凸显个性 可以使用符号来统一设计风格 logo 2.导航之道 告诉软件应该做什么 设计菜单不应该基于对象，还是基于任务（动宾词） 链接生来不平等 标签抬起头来看路 二 学习 1 开
web网页制作
lgt23456的博客
12-29 1239
生活习性页面的蓝色与土色搭配，历史文化与分布范围页面的橘黄搭配，形态特征的浅蓝白搭配，以及驯养方式，主要行为的浅蓝浅绿搭配，带给人们一种简单爽约的感觉，每个页面对狗狗的描述都有文字加图片，形态特征中加入一个轮播图的技术，最后主要行为以一个感人的音频结束，简单不单调。进入页面后，首页通过一个视频让我们对可爱的拉布拉多有一个小小的认识，然后一段文字简单介绍后，可以通过导航栏直接进入自己感兴趣的版块，如果还不太了解，也可以在“狗狗咨讯”中先了解一下，然后跳转页面充分了解。通过点击两侧的切换按钮进行照片的切换。
千峰教育前端登录页面
09-06
根据引用所提到的“评书版”前端教程，它可以帮助初学者入门前端开发，并提供思维导图和PC端网站布局示例。而引用提到的大动作、大制作前端学习路线图也可以提供全套的前端学习资源，包括优质视频和配套资料。在基础...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值