导航:首页 > 万维百科 > css设计网页

css设计网页

 发布时间：2021-02-14 00:08:52

1、用 DIV+CSS制作网页 网址

朋友你好，学习Div css网页制作需要最多的是多练习，向你介绍一个教程网站：

http://www.w3school.com.cn/css/index.asp

这里是关于CSS的资料，专这个属网站本身也是css技术只做的，也可以将其另存到本机用软件打开，看看他是怎么做的。

另外，一款好的网页制作软件会让你的学习得心应手、事半功倍，向你推荐Dreamweaver8或者Dreamweaver CS4，相关教程可以看这里

http://dreamweaver.abang.com/od/software/a/whatsdream.htm

2、div+css制作一个小网页

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<style>
.selected{
background: #ffda44;
color: #fff;
}
</style>
</head>
<body>

<ul class="question1">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<ul class="question2">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<ul class="question3">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<ul class="question4">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<ul class="question5">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>

<button>交卷</button>

<script>
$(function(){
// 正确答案
var answerArr = ["1","4","3","2","2"];
// 考生答案
var arr = ['','','','',''];
//选择答案
$("ul li").click(function(event) {
//选中的答案添加样式
$(this).addClass('selected').siblings().removeClass('selected');
//获取题目的索引
var ulIndex = $(this).parent().index();
//获取选中选项的索引并赋值到arr中
var selectedIndex = $("ul").eq(ulIndex).find("li.selected").index()+1;
arr[ulIndex] = selectedIndex;
});
$("button").click(function(event) {
//分数
var grade = 0;
//判断答案是否正确, 正确加一分
var ulLength = $("ul").length;
for (var i = 0; i < ulLength; i++) {
if (arr[i]==answerArr[i]) {
grade++;
} 
}
alert(grade);
});
})
</script>
</body>
</html>

看看合适不

3、如何用一简单的CSS制作响应式HTML网页

建议展开阅读

新人如果想快速开发出响应式网站建议使用响应式框架Bootstrap,Foundation等等......

三个部分[Viewport][网格视图][媒体查询]

1.先在head里面设置Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

用户可以通过平移和缩放来看网页的不同部分。

2.很多响应式都基于网格视图设计

响应式网格视图通常是 12 列，宽度为100%，在网页自动伸缩

比如CSS里面写

* {
    box-sizing: border-box;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

这样即可在html写

<div class="row">
<div class="col-3">
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
</div>
<div class="col-9">
<h1>2333333</h1>
<p>333333333333333333</p>
<p></p>
</div>

达到简单的响应式效果[拖拽浏览器大小查看]

图片响应式方法

div {
width: 100%;
height: 400px;
background-image: url('url');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}

background-size 属性设置为 "contain", 图片比例会自动缩放。

3.媒体查询主要用于针对不同的媒体类型定义不同的样式

比如我在电脑显示图片1,但是在手机显示的是图片2

详细可以私信我

4、CSS怎么设计网页头部

在div+css布局中，一般都像下面这样来整体构架的：

<div id="header"></div>

<div id="center"></div>

<div id="footer"></div>

对于header部分，肯定要显示网站标题，除了显示网站标题外，还可能要显示其他比较重要的对象，比如网站的导航栏：

<div id="header">

<div id="title">这里是网站的标题</div>

<div id="nav">这里是网站导航栏</div>

</div>
导航栏一般是由多个小块内容组成，选择无序列表

<ul><li></li></ul>

5、在网页制作中怎样引用CSS样式？

共有4种引入cascading sheet style层叠样式表方式： 1。<link href="路径/文件名.css" rel="stylesheet" type="text/css"> 2。<style> a{text-align:center:...}</style>(一般放在</head>与</body>之间) 3。<style> @import url("路径/文件名.css" );</style> (一般放在</head>与</body>之间,但比较少见，也少用) 4。直接在标签后面加入style=""。比如<img src='' " style="width:xxxpx;.height:xxxpx;" />

求采纳

6、求一个网页制作高手用div+css做一个网页布局 急 谢谢！！！！！！！！！！！

<!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" />
<title>无标题文档</title>
<style type="text/css">
#containt{ height:530px; width:400px; margin:0 auto; border:1px solid #000000;}
#top{ height:100px; width:380px; margin-top:7px; margin-left:9px;}
#top_left{ height:100px; width:138px; float:left; border:1px solid #000000; border-right:none;}
#top_right{ height:100px; width:238px; float:left; border:1px solid #000000;}
#content{ height:50px; width:380px; margin-top:5px; margin-left:9px; border:1px solid #000000;}
#bottom{ height:350px; width:380px; margin-top:5px; margin-left:9px;}
#bom_left{ height:350px; width:138px; float:left; border:1px solid #000000;}
#bom_right{ height:350px; width:235px; float:left; border:1px solid #000000; margin-left:3px;}
.b_r_div{ height:100px; width:68px; margin-left:6px; float:left; margin-top:5px; border:1px solid #000000;}
#b_r_bottom{ height:120px; width:225px; margin-left:5px; float:left; margin-top:5px; border:1px solid #000000;}
</style>
</head>
<body>
<div id="containt">
<div id="top">
<div id="top_left"></div>
<div id="top_right"></div>
</div>
<div id="content"></div>
<div id="bottom">
<div id="bom_left"></div>
<div id="bom_right">
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div class="b_r_div"></div>
<div id="b_r_bottom"></div>
</div>
</div>
</div>
</body>
</html>

7、在网页制作中如何使用Css

1.CSS一般适用于制作网页时，添加一些页面效果时用的。
2.CSS一般有三种方式使用：A 内嵌的方式： 如 <table style:border:1px bgcolor:pink > ----
B 脚本的方式：在页面的标签 <head >
此处添加CSS样式代码
如 a{
width:1px;
height:1px;

}
</head>
C 用include的方式嵌入一个CSS 样式文件即可。

8、如何用css样式设计整个网站字体

网站字体分为两种类型，一种是默认字体，一种是外部字体。

默认字体

如果整个网页都要弄成宋体的话就将body定义为宋体即可，即在样式表中加入：body{font-family:"宋体"}，如果只要一部分为宋体，那将那一部分的层的字体样式定义为宋体就行了。

默认的字体有宋体、楷体、黑体、新宋体、仿宋等。

外部字体

样式表中嵌入外部字体，用@font-face语法。

@font-face{font-family:name;src:<url>;sRules;}

<name>：为自定义字体名称

<url>：使用绝对或相对地址指定OpenType字体

<sRules>：样式表定义

如：

@font-face{

font-family:YH;

src:url(http://www.xxx.com/xxx.ttf);

}

然后再设置需要变换字体的样式即可，如：body{font-family:YH}，字体名称是上述所说自定义好的名称。

9、用HTML+CSS+JS设计三个页面

用PHP做过一个，你照着这个换成JS的就可以了：
下面为login.php:
<?php
session_start();
unset($_SESSION['name']);
mysql_connect("localhost", "root" ,"Changsha01") or die("Could not connect");
mysql_select_db("test") or die("Could not use db");
if (isset($_POST['submit'])) {
$name = trim($_POST['name']);
$password = trim($_POST['password']);
if (empty($name) || empty($password)) {
$flag = true;
}else {
$query = "SELECT password FROM users WHERE login_name = '" . $name . "'";
$result = mysql_query($query);
$row = mysql_fetch_array($result, MYSQL_ASSOC);
if ($password == $row['password']) {
$_SESSION['name'] = $name;
header("location: index.php");
} else {
$flag = true;
}
}
}
?>
<html>
<head><title>my document</title></head>
<body>
<form action="login.php" method=post>
<table align="center" border="0" style="padding-top:300px" >
<tr>
<td align="right">Name:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input type="password" name="password"></td>
</tr>
<?php
if (isset($flag)) {
?>
<tr>
<td colspan="2"><font color="red">Wrong Login or Password</font></td>
</tr>
<?php
}

?>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="submit"> <input type="reset" value="clear" ></td>
</tr>
</table>
</form>
</body>
</html>

下面为Success.html:
<html>
<head><title>Sucess</title></head>
<body>
<b>Sucess</b>
</body>
</head>
下面为Failed.html:
<html>
<head><title>Sucess!</title></head>
<body>
<b>Failed!</b>
</body>
</head>

与css设计网页相关的知识