整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
網站添加了https證書后，當http方式訪問網站時就會報404錯誤，所以需要做http到https的強制跳轉設置.
---------------一、采用nginx的rewrite方法---------------------
下面是將所有的http請求通過rewrite重寫到https上。
例如將所有的www.nihao.com域名的http訪問強制跳轉到https。
下面配置均可以實現：
server {
listen 80;
server_name www.nihao.com;
index index.html index.php index.htm;
access_log /usr/local/nginx/logs/8080-access.log main;
error_log /usr/local/nginx/logs/8080-error.log;
#重點在此
if ($host ~* "^nihao.com$") {
rewrite ^/(.*)$ https://www.nihao.com/ permanent;
}
location ~ / {
root html;
index index.html index.php index.htm;
}
}
先讓我們回顧下前端入門——html 超鏈接的用法 <a href="url"> , 超鏈接是一個非常偉大的發(fā)明，它鏈接了整個互聯網，沒有它就沒有互聯網。
超鏈接在發(fā)明之初就給它設計了一個默認的樣式，就是藍色帶下劃線的樣式，如下圖：
默認樣式
關于為什么超鏈接是藍色帶下劃線的歷史，可以參考這里：https://baijiahao.baidu.com/s?id=1710334071632114373&wfr=spider&for=pc
當網頁變得越來越豐富，用戶的需求越來越高的時候，這樣的樣式已經不符合大眾的審美，所以通過css來美化超鏈接非常有用和有趣。
鏈接可以使用任何 CSS 屬性（例如 color、font-family、background 等）來設置樣式。
如下圖：
除此之外，可以根據鏈接狀態(tài)來設置不同樣式，鏈接狀態(tài)分別有：
如下示例：
/* 未被訪問的鏈接 */
a:link {
color: red;
}
/* 已被訪問的鏈接 */
a:visited {
color: green;
}
/* 將鼠標懸停在鏈接上 */
a:hover {
color: hotpink;
}
/* 被選擇的鏈接 */
a:active {
color: blue;
}未被訪問的鏈接
已被訪問的鏈接
將鼠標懸停在鏈接上
被選擇的鏈接
如果為多個鏈接狀態(tài)設置樣式，請遵循如下順序規(guī)則：
以上是鏈接的各種偽類，描述了鏈接的不同狀態(tài)，你可以試試在不同狀態(tài)下給設置不同的屬性，比如背景色，字體或者文本修飾等等。
鏈接通常用來當做按鈕使用，點擊它跳轉頁面或執(zhí)行一些事件或js函數。如下示例：
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}定義了一個背景色為紅色的按鈕，如下圖：
注意：如果想在點擊這個按鈕后禁止跳轉頁面，可以給href屬性設置javascript：void();,在以后會講到JavaScript在網頁中的使用，這里你已經看到，在href屬性中通過Javascript：的形式可以執(zhí)行一段js語句或函數，這里void()就是阻止鏈接跳轉。
上面只是一個簡單的例子，當然你也可以制作更漂亮的按鈕，比如加上圓角、陰影、或漸變背景等。
當鼠標移動到鏈接上時，你會看到鼠標變成一個手形，通過css cursor 屬性可以改變鼠標指針的形狀，如下圖：
可以嘗試按照上面的屬性依次練習一遍，鏈接的樣式到此就介紹完了，感謝關注。
上篇：前端入門——css字體和文本
目中經常會出現點擊跳轉錨點的方法，比如給一個a標簽一個href=“#錨點”，然后要跳的錨點給個id=“錨點”，這樣就實現簡單的跳轉，但是這樣在url地址欄后面都會出現一個諸如www.csdn.net#錨點，然后你點擊給一次后退都是退回上一個選擇的錨點url，這里總結一些跳轉錨點的方法。
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
h2 {
position: fixed;
margin:50px 500px;
}
</style>
</head>
<body>
<h2>
<a href="#div1">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
</h2>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
這種方法的缺點是點擊錨點之后，瀏覽器的URL會發(fā)生變化，如果刷新可能會出現問題。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#div1Link").click(function() {
$("html, body").animate({
scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div2Link").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div3Link").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
return false;
});
});
</script>
注意：運行上面的腳本的之前，先將為錨點增加相應的id，同時去掉href屬性。
$("html, body")可以替換為響應的div，如果不起作用，試著給該div增加overflow：scroll屬性。
另外，腳本可以進一步優(yōu)化，自己來試試
這樣做的好處是：URL地址不會變，同時點擊錨點時會自動響應scroll事件，不需要重新綁定。
缺點是：如果頁面復雜的話，偏移值可能會發(fā)生變化需要算法輔助。
document.getElementById("divId").scrollIntoView();
比如：
document.querySelector("#roll1").onclick=function(){
document.querySelector("#roll1_top").scrollIntoView(true);
}
這里就是點擊id是#roll1的元素可以滾動到id是#roll1_top的地方，這里的#roll1和#roll1_top最好是一一對應的，
這種方法的好處，是URL不會變，同時能夠響應相應的scroll事件，不需要算法什么的。代碼如下：
<html>
<head>
<title>HTML5_ScrollInToView方法</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload=function(){
/*
如果滾動頁面也是DOM沒有解決的一個問題。為了解決這個問題，瀏覽器實現了一下方法，
以方便開發(fā)人員如何更好的控制頁面的滾動。在各種專有方法中，HTML5選擇了scrollIntoView()
作為標準方法。
scrollIntoView()可以在所有的HTML元素上調用，通過滾動瀏覽器窗口或某個容器元素，
調用元素就可以出現在視窗中。如果給該方法傳入true作為參數，或者不傳入任何參數，那么
窗口滾動之后會讓調動元素頂部和視窗頂部盡可能齊平。如果傳入false作為參數，調用元素
會盡可能全部出現在視口中（可能的話，調用元素的底部會與視口的頂部齊平。）不過頂部
不一定齊平，例如：
//讓元素可見
document.forms[0].scrollIntoView();
當頁面發(fā)生變化時，一般會用這個方法來吸引用戶注意力。實際上，為某個元素設置焦點也
會導致瀏覽器滾動顯示獲得焦點的元素。
支持該方法的瀏覽器有 IE、Firefox、Safari和Opera。
*/
document.querySelector("#roll1").onclick=function(){
document.querySelector("#roll_top").scrollIntoView(false);
}
document.querySelector("#roll2").onclick=function(){
document.querySelector("#roll_top").scrollIntoView(true);
}
}
</script>
<style type="text/css">
#myDiv{
height:900px;
background-color:gray;
}
#roll_top{
height:900px;
background-color:green;
color:#FFF;
font-size:50px;
position:relative;
}
#bottom{
position:absolute;
display:block;
left;0;bottom:0;
}
</style>
</head>
<body>
<button id="roll1">scrollIntoView(false)</button>
<button id="roll2">scrollIntoView(true)</button>
<div id="myDiv"></div>
<div id="roll_top">
scrollIntoView(ture)元素上邊框與視窗頂部齊平
<span id="bottom">scrollIntoView(false)元素下邊框與視窗底部齊平</span>
</div>
</body>
</html>
個人建議使用第四種方法。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
