CSS综合示例(博雅首页)

最新推荐文章于 2024-04-29 21:24:22 发布
最新推荐文章于 2024-04-29 21:24:22 发布
阅读量1.1k 收藏 10
点赞数 1
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014042372/article/details/87266730
版权

项目源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 14px;
            font-family: "Microsoft YaHei","SimSun";
            height: 2000px;
        }
        .header{
            height: 58px;
            background-color: #191D3A;
        }
        .inner_c{
            width: 1000px;
            /*height: 58px;*/
            margin: 0 auto;
        }
        .header .logo{
            float: left;
            padding-left: 12px;
            padding-right: 40px;
            /*margin-right: 40px;*/
            width: 184px;
            height: 58px;
        }
        .header .logo a{
            display: block;
            width: 184px;
            height: 58px;
            background: url("images/logo.png") no-repeat;
            text-indent: -999em;
        }
        .header .nav{
            float: left;
        }
        .header .nav ul{
            list-style: none;
        }
        .header .nav ul li{
            float: left;
            width: 100px;
            line-height: 58px;
            text-align: center;
            border-left: 1px solid #252947;
        }
        .header .nav ul li.last{
            border-right: 1px solid #252947;
        }
        .header .nav ul li a{
            color: #818496;
            text-decoration: none;
            display: block;
        }
        .header .nav ul li a:hover{
            color: greenyellow;
            background-color: #252947;
        }

        .header .nav ul li a.current{
            background-color: #252947;
        }
        .header .jrwm_box{
            float: left;
            padding-left: 48px;
            padding-top: 12px;
        }
        .banner{
            height: 465px;
            background: url("images/banner.jpg") no-repeat center top;
        }
        .content{
            padding-top: 50px;
            height: 650px;
            background: url("images/indexmainbg.jpg") no-repeat center bottom;
            /*background: pink;*/
        }
        .content .product{
            height: 229px;
            border-bottom: 1px solid #DBE1E7;
        }
        .content .product ul{
            list-style: none;
        }
        .content .product ul li{
            float: left;
            width: 218px;
            margin-right: 43px;
        }
        .content .product ul li.last{
            margin-right: 0;
            width: 217px;
        }
        .content .product ul li img{
            width: 218px;
            height: 130px;
        }
        .content .product ul li.last img{
            width: 217px;
        }
        .content .product ul li h3{
            text-align: center;
            line-height: 38px;
            font-size: 14px;
            font-weight: bold;
        }
        .content .product ul li p.djbf{
            text-align: center;
            line-height: 16px;
        }
        .content .product ul li p.djbf a{
            font-size: 12px;
            color: #38B774;
            text-decoration: none;
            background:url("images/sanjiaoxing.png") no-repeat right center;
            padding-right: 14px;
        }
        .content .info{
            padding-top: 53px;
        }
        .content .info .boyaanews{
            float: left;
            width: 500px;
            /*height: 314px;*/
            background: url("images/bynewsbg.jpg");
            padding-top: 110px;
            position: relative;
        }
        .content .info .boyaajobs{
            float: left;
            width: 500px;
            height: 314px;
            background: url("images/byhrbg3.jpg");
            position: relative;
        }
        .content .info .boyaajobs .more2{
            position: absolute;
            top: 40px;
            left: 218px;
            width: 67px;
            height: 28px;
        }
        .content .info .boyaanews .more{
            position: absolute;
            top: 40px;
            left: 218px;
            width: 67px;
            height: 28px;
        }
        .content .info .boyaanews ul{
            list-style: none;
            padding: 0 20px;
        }
        .content .info .boyaanews ul li{
            line-height: 50px;
            border-bottom: 1px solid #DBE1E7;
            font-size: 12px;
        }
        .content .info .boyaanews ul li span{
            color: #AFBECF;
            margin-right: 20px;
        }
        .content .info .boyaanews ul li a{
            color: #444866;
            text-decoration: none;
            font-size: 14px;

        }
        .content .info .boyaanews ul li a:hover{
            color: orange;
        }
        .content .info .boyaajobs .title{
            padding-top: 40px;
            padding-left: 80px;
        }
        .content .info .boyaajobs .title h3{
            width: 119px;
            height: 51px;
            background:url("images/zczp.png") no-repeat;
            text-indent: -999em;
        }
        .content .info .boyaajobs h4{
            padding-top: 18px;
            padding-left: 20px;
            color: white;
        }
        .content .info .boyaajobs ul{
            padding-left: 20px;
            width: 305px;
            list-style: none;
        }
        .content .info .boyaajobs ul li{
            border-bottom: 1px solid #6FDEA3;
            line-height: 37px;
        }
        .content .info .boyaajobs ul li a{
            font-size: 12px;
            color: white;
            text-decoration: none;
        }
        .content .info .boyaajobs ul li a:hover{
            color: orange;
        }

    </style>
</head>
<body>
    <div class="header">
        <div class="inner_c">
            <h1 class="logo">
                <a href="#">博雅互动-世界上最好的游戏公司</a>
                <!--<img src="images/logo.png" alt="">-->
            </h1>
            <div class="nav">
                <ul>
                    <li><a href="#" class="current">首页</a></li>
                    <li><a href="#">博雅游戏</a></li>
                    <li><a href="#">博雅新闻</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">客服中心</a></li>
                    <li class="last"><a href="#">投资者关系</a></li>
                </ul>
            </div>
            <div class="jrwm_box">
                <a href="#" class="jrwm">
                    <img src="images/jrwm.png" alt="">
                </a>
            </div>
        </div>
    </div>
    <div class="banner">

    </div>
    <div class="content">
        <div class="inner_c">
            <div class="product">
                <ul>
                    <li>
                        <p><img src="images/pro1.jpg" alt=""></p>
                        <h3>BPT宣传片</h3>
                        <p class="djbf"><a href="#">点击播放</a></p>
                    </li>
                    <li>
                        <p><img src="images/pro2.jpg" alt=""></p>
                        <h3>BPT宣传片</h3>
                        <p class="djbf"><a href="#">点击播放</a></p>
                    </li>
                    <li>
                        <p><img src="images/pro3.jpg" alt=""></p>
                        <h3>BPT宣传片</h3>
                        <p class="djbf"><a href="#">点击播放</a></p>
                    </li>
                    <li class="last">
                        <p><img src="images/pro4.jpg" alt=""></p>
                        <h3>BPT宣传片</h3>
                        <p class="djbf"><a href="#">点击播放</a></p>
                    </li>
                </ul>
            </div>
            <div class="info">
                <div class="boyaanews">
                    <p><a class="more" href="#"><img src="images/more.png" alt=""></a></p>
                    <ul>
                        <li>
                            <span>09 / 28</span>
                            <a href="#">2015博雅国际博客大赛(BPT)在澳门落幕</a>
                        </li>
                        <li>
                            <span>09 / 28</span>
                            <a href="#">2015博雅国际博客大赛(BPT)在澳门落幕</a>
                        </li>
                        <li>
                            <span>09 / 28</span>
                            <a href="#">2015博雅国际博客大赛(BPT)在澳门落幕</a>
                        </li>
                        <li>
                            <span>09 / 28</span>
                            <a href="#">2015博雅国际博客大赛(BPT)在澳门落幕</a>
                        </li>
                    </ul>
                </div>
                <div class="boyaajobs">
                    <!--<h3>-->
                        <!--<img src="images/zczp.png" alt="">-->
                    <!--</h3>-->
                    <p><a class="more2" href="#"><img src="images/more2.png" alt=""></a></p>
                    <div class="title">
                        <h3>专场招聘</h3>
                    </div>
                    <h4>
                        专场招聘岗位:
                    </h4>
                    <ul>
                        <li><a href="#">WEB前端开发工程师</a></li>
                        <li><a href="#">WEB前端开发工程师</a></li>
                        <li><a href="#">WEB前端开发工程师</a></li>
                        <li><a href="#">WEB前端开发工程师</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

 

star9595
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css综合案例
syyy9090的博客
03-20 202
新闻页面 注意： 先搭建html框架，在写css（从宏观到微观） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新闻案例</title> <style> .sub_title { te...
css常用综合案例
Evan's learning log
02-14 1103
一.基本css样例         1.圆角            效果图：                       设计思想，利用一组高为1px的块状元素逐行缩进，达到圆角的效果。这里使用b元素（简单只有一个字母）。圆角边框示意图： 源码如下： #container{ margin:0 20%;
博雅最基础页面html 只有代码，没放图片
最新发布
2401_84197372的博客
04-29 162
【代码】博雅最基础页面html 只有代码，没放图片。
CSS综合案例——学成在线网站
weixin_45586870的博客
12-10 939
做的是一个学成在线网站，比较基础~效果图如下，运用的是html和CSS基本语法和核心知识点 1.源代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-
仿写淘宝评价部分的盒子模型
qq_44723773的博客
10-10 373
预览 代码 <!-- * @Author: OriginalCoder * @Date: 2020-10-10 10:37:12 * @version: * @LastEditTime: 2020-10-10 11:09:11 * @LastEditors: OriginalCoder * @Description: --> <!DOCTYPE html> <html lang="en"> <head> <meta char
CSS3_综合案例
aof26372的博客
11-17 200
综合案例 设置元素的 width，还可以利用 left 和 right 为了防止图片太小，background-size: 100% 100%; <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> ...
jQuery 设置 CSS 属性示例介绍
12-08
设置 CSS 属性 如需设置指定的 CSS 属性，请使用如下语法： 代码如下: css(“propertyname”,”value”); 下面的例子将为所有匹配元素设置 background-color 值： 实例 代码如下: $(“p”).css(“background-color”...
CSS 圆角示例详细教程
04-03
我们将在本文中研究 CSS 创建的圆角。 我们将介绍的步骤： 什么是 CSS 边框半径？ 使用 CSS border-radius 实现圆角 使用 CSS border-radius 的椭圆角 使用 CSS border-radius 的随机角。 倒角 缺角角
CSS 曲线阴影实现的示例代码
12-29
本文介绍了CSS 曲线阴影实现的示例代码，分享给大家，具体如下： 通过对比可以看书“曲线阴影”比“普通阴影”的效果会更加生动。 原理：通过伪元素做出第二层阴影效果。 注意：伪元素的尺寸要比父元素小一点，...
php简单压缩css样式示例
01-21
$css = ''; //找css目录 $root = $_SERVER['DOCUMENT_ROOT'].'/css/'; //directory where the css lives $files = explode(',',$_SERVER['QUERY_STRING']); if(sizeof($files)) { foreach($files as $file) { $...
css 3d 旋转画框示例
05-11
css 3d 旋转画框示例
9个HTML5 CSS3精彩案例
08-21
9个HTML5 CSS3精彩案例
HTML+css静态网页制作简单实例
06-16
是一款HTML+css的静态网页做成的，没有动态数据库连接
【前端网页】基于CSS的四个综合案例
专注于Java领域开发 关注我 带你玩转Java
07-23 629
个人简介、百度热搜榜、热门条目新闻、搜索条件
html+css课程综合案例
skysys的研究小屋
02-06 471
素材 wget http://labfile.oss.aliyuncs.com/courses/1237/images.zip <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> ...
CSS学习22：综合案例
Blog of Lytracy
08-09 171
参考效果，尝试完成下面的页面。 本案例所使用的图片，可以直接在展示图片上切图来使用，也可以直接网上另外找图片来代替，作为一名优秀的前端工程师，简单的切图技能也是必须的哟。另外CSS使用外链式，实现样式与结构化的分离，养成良好的编码习惯。 我们可以把整个网页切成上述八个 div 盒子，然后再依次完成每个 div 盒子的内容。 ...
css用法详解整理2，含综合示例，可运行
QiaoLiu___lq的博客
02-27 231
css用法详解整理2，含综合示例，可运行
博雅页面
weixin_30883311的博客
11-24 582
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>博雅设计图</title> <style type="text/css"> .header { 　　　　　　//头部，设置宽高及其背景颜色 heigh...
js设置css样式示例
04-25
好的，请看下面的代码示例： ```html <!DOCTYPE html> <html> <head> <title>JS设置CSS样式示例</title> <style> .demo { width: 100px; height: 100px; background-color: #f00; } </style> </head> <body> <div id="demoDiv" class="demo"></div> <script> var demoDiv = document.getElementById("demoDiv"); demoDiv.style.width = "200px"; demoDiv.style.height = "200px"; demoDiv.style.backgroundColor = "#0f0"; </script> </body> </html> ``` 以上示例中，我们通过 JavaScript 获取了 id 为 "demoDiv" 的元素，然后利用 .style 属性来修改该元素的 CSS 样式。具体来说，我们通过设置 .style.width 和 .style.height 属性改变了元素的宽度和高度，通过 .style.backgroundColor 属性改变了元素的背景颜色。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值