CSS应用 sohu页面

最新推荐文章于 2022-06-03 16:57:07 发布
最新推荐文章于 2022-06-03 16:57:07 发布
阅读量601 收藏
点赞数
分类专栏： 项目设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ALL_Dash/article/details/8872376
版权

css作业练手用


sohu.html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="my.css" />
<title>无标题文档</title>
</head>
<body>
<!--top部分-->
<div class="top">
<span class="login">登录表单</span>
<span class="setindex">设置首页面</span>
<span class="myhref">超链接</span>
</div>
<!--logo-->
<div class="logo">
</div>
<!--导航-->
<div class="navi">
</div>
<!--广告-->
<div class="adAll">
<div class="adstu">
招生广告</div>
<div class="adSport">
运动广告</div>
<div class="adfdc">
房地产广告
</div>
<div class="adimg">
图片广告
</div>
</div>
</body>
</html>

my.css 

/* CSS Document */

body{
	margin:0 auto;
	/*border:1px solid green;*/
	width:950px;
	height:800px;
	font-size:12px;
}

.top{
	width:950px;
	/*background:silver;*/
	height:24px;
}

.login{
	width:350px;
	height:22px;
	background:pink;
	float:left;
}

.setindex{
	width:85px;
	height:22px;
	background:green;
	float:left;
	margin-left:100px;
}

.myhref{
	float:right;
	margin-right:5px;
	margin-top:3px;
}

/*我的logo*/
.logo{
	width:130px;
	height:56px;
	background:silver;
	float:left;
	margin-top:3px;
}

/*导航*/
.navi{
	width:805px;
	height:56px;
	background:#7BF773;
	float:left;
	margin:3px;
	margin-right:10px;
}

/*总体广告div*/
.adAll{
	width:950px;
	height:211px;
	border:1px solid sliver;
	margin-top:3px;
	float:left;
}

/*招生广告*/
.adstu{
	width:126px;
	height:195px;
	background:#7BF773;
	border:1px solid silver;
	margin-top:3px;
	float:left;
}

/*运动广告*/
.adSport{
	width:451px;
	height:195px;
	background:#7BF773;;
	float:left;
	margin:5px 0 0 15px;
}

/*房地产广告*/
.adfdc{
	width:151px;
	height:195px;
	background:#7BF773;;
	float:left;
	margin:5px 0 0 15px;
}

/*图片广告*/
.adimg{
	width:180px;
	height:211px;
	background:pink;
	float:right;
	text-align:center;
	border-left:1px solid silver;
}



AKDash
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【HTML&CSS】搜狐页面代码编写
delj70098的博客
10-28 852
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> &lt...
使用html+css仿搜狐网址页面布局
youyajie的专栏
05-05 3664
html代码为： souhu.html login 微博推荐 导航 招生 广告2 广告3
163，搜狐，新浪哪个邮箱安全？
weixin_33979363的博客
01-22 357
 用Wireshark对163，搜狐，新浪普通邮箱用户发送邮件做了一下抓包，分析如下，无图无真相，请看 （163邮箱） （sohu邮箱） （sina邮箱） 当然也许我有遗漏的地方，希望大家能帮我补全，就目前来看，仿佛sina做得最好，虽然我最不喜欢sina，也从不上sina网，我现在用的是gmail。   另外，我也不喜欢360，但是想用自己的看法帮360说句话，去年底，金...
css页面组件
weixin_30311605的博客
10-13 90
页面组件 1 元素的尺寸/边框/背景 1.1 css尺寸相关属性 height 高度 min-height 最小高度 max-height 最大高度 width 宽度 min-width 最小宽度 max-width 最大宽度 1.2 css内边距 padding 内边距 padding-left 左内边距 padding-right 右内边距 pa...
CSS 之CSS3 选择器
程序员小白的博客
06-03 493
标签选择器最基本的形态如下： 通过一个具体标记来命名，能对文档里这个标记出现的每一个地方应用样式定义。例子 1： 在一个页面，使用标签选择器会控制该页面中所有此标记的显示样式；若需要为此类标记中的一个标记重新设定，仅使用标签选择器是不能达到效果的，还要使用类别（class）选择器； 类选择器用来为一系列标记定义相同的呈现方式， 语法格式如下： 是选择器的名称，若一个标记具有 class 属性且 class 属性为 ，那么该标记的呈现样式由该选择器指定； 在定义类选择符时，需要在 classValue 前面
HTML+CSS编写规范
yuanli_的博客
08-24 235
在任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。由于Web项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。 第一节CSS样式文件的命名 建立样式表文件时，分类编写样式到下列样式表文件中，并统一放在【CSS】文件夹里： 主要 main.css 文字样式 font.css 表格 table.css.
CSS(一)选择器
faramita_of_mine的博客
11-15 1067
CSS之选择器一、在 HTML 中使用 CSS①内联样式②嵌入样式③外部样式二、响应式（了解）三、基础选择器四、层次选择器五、伪类选择器（自）六、动态伪类选择器（自）七、目标伪类选择器（自）八、结构伪类选择器（自）九、否定选择器（自）十、伪元素（自）十一、属性选择器（自） 一、在 HTML 中使用 CSS ①内联样式   内联样式是在元素属性中设置样式。此种方式很适合用于测试样式和快速查看样式效果，但是不推荐在整个文档上使用此方法。   在使用此方法时，必须在每一个元素上重复设置各个样式，这样既增加文档大小
用js实现的仿sohu博客更换页面风格（简单版）
10-30
- `className` 属性用于设置或获取元素的CSS类名，通过这个属性可以应用样式。 - `textContent` 设置或返回元素的文本内容。 4. **事件处理**： 使用 `ldg.event.addEvent` 来添加事件监听器，这里使用了 `...
sohu团购顶部切换城市导航特效代码
03-20
- `css`目录: 包含CSS样式文件，用于定义页面的布局、颜色、字体等视觉样式，实现城市导航的美观效果。 - `images`目录: 存放与项目相关的其他图像资源，可能包括图标、按钮或其他图形元素。 - `js`目录: 包含...
HTML技术有css javascript
07-19
本站介绍的链接应用都是基于标记基础上的。 链接标记的属性见下表 属性 描述 href 指定链接地址 name 给链接命名 title 给链接提示文字 target 指定链接的目标窗口 accesskey 链接热键 关于路径 每一个...
js弹出日历用到的js和css文件
02-20
首先，js弹出日历的核心是JavaScript，这是一种广泛应用于客户端的脚本语言，它允许开发者在不刷新页面的情况下动态更新内容，实现与用户的交互。在创建日历组件时，JavaScript主要负责以下几个关键任务： 1. **...
SOHU体育flash图片轮换
05-28
在IT行业中，网页设计与开发是一项关键技能，而图片轮换功能是许多网站...随着技术的发展，现代网页更多地使用HTML5和CSS3来实现类似的特效，但这个案例仍然是JavaScript和Flash在网页设计领域中成功应用的一个实例。
【HTML/CSS/JavaScript】网页设计实验三（超链接与多媒体文件应用）
qq_52384627的博客
11-09 8961
网页设计实验三一 设计简易灯箱画廊二 设计支持音频、视频播放的网页三 设计简易网站导航四 设计新生课程简介五 设计中国名牌大学简介页面 一 设计简易灯箱画廊 实训 3 超链接与多媒体文件应用 项目 1 设计简易灯箱画廊 使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 3-1 所示： （1）文件名：prj_3_1.html。 （2）页面标题：“简易灯箱画廊设计”。 （3）实验所需素材：在 trees 文件夹中提供一个 MP3 文件和 18 个 JPG 文件， 设计页面时可以使用。
PHP 基于文本系统的简易的聊天室
Dash
06-29 1375
login.php 聊天室 选择房间： 大厅 客房 后院 你的名称： input.php " /> 聊天室 <?php $name=str_replace("<","<",$name); $name=str_replace("",$name); $name=stripslashes(trim($na
javafx css 应用字体
最新发布
03-24
在JavaFX中，可以使用CSS来为应用程序设置字体样式。通过CSS，您可以为不同的节点或组件设置不同的字体样式，包括字体类型、大小、颜色等。 要在JavaFX中应用字体样式，可以按照以下步骤进行操作： 1. 创建一个CSS文件，例如styles.css，并将其与您的JavaFX应用程序关联起来。可以使用`scene.getStylesheets().add("styles.css")`方法将CSS文件添加到场景中。 2. 在CSS文件中，使用`-fx-font-family`属性来设置字体类型。例如，要将字体设置为Arial，可以使用以下代码： ``` .myLabel { -fx-font-family: "Arial"; } ``` 3. 使用`-fx-font-size`属性来设置字体大小。例如，要将字体大小设置为14像素，可以使用以下代码： ``` .myLabel { -fx-font-size: 14px; } ``` 4. 使用`-fx-text-fill`属性来设置字体颜色。例如，要将字体颜色设置为红色，可以使用以下代码： ``` .myLabel { -fx-text-fill: red; } ``` 5. 在JavaFX应用程序的布局文件中，为需要应用字体样式的节点或组件添加一个CSS类。例如，如果您有一个Label组件，并且想要应用上述定义的字体样式，可以使用以下代码： ``` Label label = new Label("Hello World"); label.getStyleClass().add("myLabel"); ``` 这样，您的Label组件将应用定义的字体样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值