導航:首頁 > 萬維百科 > 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設計網頁相關的知識