CSS--沃顿商学院网页布局

源代码：

<head>

右键CSS样式--附加样式表

</head>

<body>

<div id="dd">

    <div id="menu" class="container">

        <ul>

          <li>PENN</li>

          <li>WHARTON HOME</li>

          <li class="drop">CAMPUSES</li>

          <li>DIRECTORIES</li>

          <li>NEWS</li>

          <li class="drop">QUICKLINKS</li>

        </ul>

    </div>

    <div id="head" class="container">

        <div id="logo">

          <div id="divsearch">

            <form>

                <input type="text" id="txtSearch" />

                <input type="button" value="" id="btnSearch" />

            </form>

            </div>

            <img src="../../../../学习1/0121沃顿网页布局/Images/header_logo.gif" />

        </div>

        <div id="nav">

            <ul>

                <li>Recruiters and Corporations</li>

                <li>Alumin</li>

                <li>About Wharton</li>

                <li>Faculty And Research</li>

                <li>Academics</li>

            </ul>

        </div>

    </div>

    <div id="main" class="container">

        <div id="slider">

          <div id="whartonmenu">

               <div class="fulltime">UNDERGRADUATE</div>

                <div class="fulltimeMBA" id="MBA">MBA

                    <div class="MBAFullTIME">FULL-TIME</div>

                    <div class="MBAFullTIME">FOR EXECUTIVES</div>

                </div>

                <div class="fulltime">DOCTORAL</div>

                <div class="fulltime">EXECUTIVE EDUCATION</div>

                <div class="fulltime">ALUMNI NETWORK</div>

          </div>

      </div>

      <div style="clear:both;"></div>

      <div id="MyWharton">

          <div class="headline">

            #MyWharton

        </div>

        <ul>

            <li class="one">

                <img src="../../../../学习1/0121沃顿网页布局/Images/Zhu_Jane_325.jpg" />

                    <div class="sound">

                    “We look at real problems companies face, and solve them using what we learn in class.” Jane Zhu, W’15

                    </div>

            </li>

            <li class="one">

                <img src="../../../../学习1/0121沃顿网页布局/Images/dehnad_kristal_325.jpg" />

                    <div class="sound">

                    “We look at real problems companies face, and solve them using what we learn in class.” Jane Zhu, W’15

                    </div>

            </li>

            <li class="two">

                <img src="../../../../学习1/0121沃顿网页布局/Images/graber_emmy_325.jpg" />

                    <div class="sound">

                    “We look at real problems companies face, and solve them using what we learn in class.” Jane Zhu, W’15

                    </div>

            </li>

        </ul>

      </div>

  </div>

</div>

</div>

<div></div>

<div></div>

</body>

</html>

CSS:

*

{

    margin:0px;

    padding:0px;

}

body

{

    background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/body_bg.jpg);

    background-repeat:repeat-x;

    font-family:Arial, Helvetica, sans-serif;

    font-size:14px;

}

#dd

{

    width:950px;

    margin:auto;

}

.container

{

    /*border:1px solid red;*/

    float:left;

    width:100%;

}

ul

{

    list-style-type:none;

}

/***********设计最上面区域的样式************/

#menu

{

    background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/metaNav_bg.jpg);

}

#menu ul

{

    float:right;

}

#menu ul li

{

    float:right;

    color:white;

    font-weight:bold;

    padding:5px 10px 5px 10px;

}

/***************************/

#menu li.drop

{

    background-color:gray;

}

/************head和logo部份的样式************/

#head

{

    background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/header_bg.jpg);

}

#logo img

{

    margin:15px 0px 17px 25px;

}

#divsearch

{

    float:right;

    margin:26px 10px 0px 0px;

}

#txtSearch

{

    width:200px;

    border:none;

    padding:3px 5px 3px 5px;

}

#btnSearch

{

    width:22px;

    height:22px;

    border:none;

    margin:0px;

    background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/searchArrow.gif);

    background-position:center;

    position:relative;

    top:6px;

}

#nav

{

    background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/mainNav_bg.jpg);

    background-repeat:no-repeat;

    background-position:right top;

    float:left;

    width:100%;

}

#nav ul

{

    float:right;

    width:100%;

    margin-right:50px;

}

#nav ul li

{

    float:right;

    padding:5px 10px 5px 10px;

    color:white;

    border-right:1px solid #224889;

}

/*************slider***************/

#slider

{

    height:545px;

    width:100%;

    float:left;

    background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/hp_splash4.jpg);

    background-repeat:no-repeat;

}

#whartonmenu

{

    float:right;

    width:235px;

    margin:30px 60px;

}

#whartonmenu .fulltime

{

    padding:20px 5px 20px 5px;

    background-color:#224889;

    margin-bottom:15px;

    color:white;

    font-size:18px;

    text-align:center;

}

#whartonmenu .fulltimeMBA

{

    padding:20px 5px 20px 5px;

    margin-bottom:15px;

    color:white;

    font-size:18px;

    text-align:center;

}

#MBA

{

    background-image:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/grad-mba.png);

}

#MBA .MBAFullTIME

{

    margin:10px;

    background-color:#224889;

    padding:10px 0px 10px 0px;

}

/************My Wharton****************/

#MyWharton

{

    margin-top:20px;

}

#MyWharton .headline

{

    text-align:center;

    font-size:40px;

    color:#aaaaaa;

    font-weight:normal;

}

#MyWharton ul

{

    float:left;

    width:100%;

}

#MyWharton ul li

{

    float:left;

    width:300px;

}

#MyWharton ul li.one

{

    margin-right:25px;

}

#MyWharton ul li.two

{

    float:right;

}

#MyWharton ul li img

{

    width:300px;

    height:300px;

}

#MyWharton ul li div.sound

{

    background:url(../../../../%E5%AD%A6%E4%B9%A01/0121%E6%B2%83%E9%A1%BF%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/Images/grad-mba.png);

    color:white;

    width:100%;

    padding:10px;

    width:280px;

    position:relative;

    bottom:68px;

}

CSS--沃顿商学院网页布局的更多相关文章

css 实现的网页布局
css 实现网页布局,上中下三部分,中间为固定宽度且分为左右两部分 <!DOCTYPE html> <html> <head> <meta charset ...
CSS简单的网页布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
css基础-定位+网页布局案例
position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...
DIV+CSS常用的网页布局代码
单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...
CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则稍后在"技 ...
《精通CSS网页布局》读书报告 ----2016-12-5补充
第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...
DIV+CSS常用网页布局技巧！
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
一、HTML和CSS基础--网页布局--网页布局基础
W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...
CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

随机推荐

win10环境下pycharm成功安装torch，解决报错:from torch._C import * ImportError: DLL load failed: 找不到指定的模块
https://blog.csdn.net/watermelon12138/article/details/97624733
关于使用静态链表实现一元多项式的相加&&乘积
一元多项式的相加类似于两条链表的合并当然前提是链表中的幂指数是按顺序排列的此题中的链表采用的是升序排列,输出也是按升序输出的 #include<stdio.h> #include< ...
Python笔记_第一篇_面向过程_第一部分_5.Python数据类型之字典类型(dict)
字典!在Python中字典是另一种可变容器模型,可以存储任意类型的对象.是Python存储数据类型的最高级(maybe). 特点:1. 字典的存储方式和其他类型数据略有不同,是通过键(key)和值(v ...
[Algo] 175. Decompress String II
Given a string in compressed form, decompress it to the original string. The adjacent repeated chara ...
CaptchaCodeManager
package org.linlinjava.litemall.wx.service; import org.linlinjava.litemall.wx.dto.CaptchaItem; impor ...
黑科技如何制造人类V2.0？
黑科技泛指人类尚未成熟但具有巨大潜力的科学技术,智能手机.大数据.扫码支付.电子地图等等都曾属于黑科技范畴,随着时间的推移,它们慢慢成熟,且展现出巨大的能力,影响人类进程,最终黑科技转变成人类伟大的创 ...
Apsara Clouder云计算技能认证：云数据库管理与数据迁移
一.课程介绍二.云数据库的简介及使用场景 1.云数据库简介 1.1特点: 用户按存储容量和带宽的需求付费可移植性按需扩展高可用性(HA) 1.2阿里云云数据库 RDS 稳定可靠,可弹性伸缩的在 ...
HEX 文件格式
例 FDFFF885C3 :每行开头第一个字节:表示本行的数据长度, 第二个,第三个字节表示本行数据的起始地址. 第四字节表示数据类型,数据类型有:0x00.0x01.0x02.0x03.0x04. ...
C# 关闭登录窗体，显示主窗体
首先在programm.cs里设置登录窗体显示 static class Program { /// <summary> /// The main ent ...
博客框架 Hexo: 3.9.0 及主题 NexT 6.x.x 基本操作
文章大纲 1. 不同代码仓库部署 coding 部署方式项目名称配置 SSH 公钥访问 git 仓库 github 码云 2. 手动cdn,智能解析 3. 添加评论系统 4. 博客置顶 5. 页脚 ...

CSS--沃顿商学院网页布局

CSS--沃顿商学院网页布局的更多相关文章

随机推荐

热门专题