新浪網站首頁同款選項卡
選項卡效果
這是我自己模仿新浪網站首頁中部的選項卡做的，大致的效果就是這樣的
選項卡的佈局和 javascript 控制
下面具體說明一下完成的過程，主要是闡述清楚用javascript實現它的原理：
- 首先介紹一下它的
html構成，選項卡的頭部使用的ul套li的模式，每個被選選項下方內容的呈現都是用一個div做容器，至於內容div裡面的東西就可以自己發揮，想呈現什麼內容都可以。（我呈現的是像新浪網站首頁一樣下方三張圖片加上一些資訊列表）
- 最核心的部分就是對選項卡的控制進行封裝，完美的封裝到只需要提供選項卡的容器的
id，我就可以實現選項卡選擇的效果！！！！！（當然的前提是選項卡的佈局必須是上方的html的格式）
3.選項卡的樣式就很簡單了， 在後面會有原始碼，供需要的參考。
選項卡的html,css,javascript原始碼
html:
<div class="context_center_item">
<!--上面的選項卡-->
<div class="context_item context_center_top_item" id="context_center_top_item">
<ul class="select_items select_center_top_items" id="select_center_top_items" css:
/*所有選項卡統一設定開始*/
.context_items .context_item{
width: 360px;
}
.context_items .context_item .select_items{
height: 34px;
border: 1px solid #dbdee1;
background: url(//i2.sinaimg.cn/dy/deco/2013/0321/bg1px.png) 0 -33px repeat-x;
}
.context_items .context_item .select_items li{
display: inline-block;
width: 64px;
height: 35px;
line-height: 35px;
}
.context_items .context_item .select_items li a{
color: #000000;
font-size: 16px;
margin-left: 11px;
font-family: "Microsoft YaHei","微軟雅黑","SimHei","黑體";
}
.context_items .context_item .select_items .selected{
height: 33px;
line-height: 29px;
border-top: 3px solid #ff8400;
border-right: 1px solid #dbdee1;
background-color: #fff;
}
.context_items .context_item .select_context_info .undisplay_div{
display: none;
}
.context_items .context_item .select_context_info .threePic{
display: flex;
justify-content: space-between;
margin: 10px 0px;
}
.context_items .context_item .select_context_info .threePic a{
float: left;
display: block;
width: 105px;
height: 90px;
overflow: hidden;
border: 1px solid #fff;
position: relative;
z-index: 0;
}
.context_items .context_item .select_context_info .threePic a:hover{
border: 1px solid #FF8400;
}
.context_items .context_item .select_context_info .threePic a span {
width: 105px;
text-align: center;
margin-top: -4px;
color: #fff;
height: 20px;
line-height: 20px;
display: block;
background: #000;
}
.context_items .context_item .select_context_info li{
padding-left: 10px;
line-height: 26px;
height: 26px;
overflow: hidden;
font-size: 14px;
background: url(//i0.sinaimg.cn/home/main/index2013/0403/icon.png) no-repeat 0 -881px;
}
.context_items .context_item .select_context_info a{
color: #122e67;
}
.context_items .context_item .select_context_info a:hover{
color: #ff8400;
text-decoration: underline;
}
.context_items .context_item .select_context_info li .nowsLeftIcon{
background: url(//i1.sinaimg.cn/dy/main/icon/photoNewsLeft2.gif) no-repeat 0 center;
padding-left: 23px;
}
/*所有選項卡統一設定結束*/
javascript:
//設定選項卡的顯隱效果
function set_selectCard_effect(father_content_id) {
//拿到選項卡的ul
let ul = document.getElementById(father_content_id).children[0];
//獲取當前ul下所以的li
let lis = ul.getElementsByTagName("li");
let length = lis.length;//獲取li的個數
let li_id = lis[0].getAttribute("id");//獲取li的id
let li_preId = li_id.substring(0,li_id.length - 1);//獲取li的字首id
//獲取所有內容div的父類
let div_all = document.getElementById(father_content_id).children[1
相關推薦
新浪網站首頁同款選項卡
選項卡效果
這是我自己模仿新浪網站首頁中部的選項卡做的，大致的效果就是這樣的
選項卡的佈局和 javascript 控制
下面具體說明一下完成的過程，主要是闡述清楚用javascript實現它的原理：
首先介紹一下它的html構成，選項卡的頭部使用的u
python3爬蟲-爬取新浪新聞首頁所有新聞標題
準備工作：安裝requests和BeautifulSoup4。開啟cmd，輸入如下命令
pip install requests
pip install BeautifulSoup4
按F12開啟開發人員工具，點選左上角的圖片，然後再頁面中點選你想檢
網站首頁布局實戰（簡單）
成了 meta screen head false active amp 關於 span 跟著教程完成了一個簡單的首頁制作，沒有用js，畢竟是第一個實戰，紀念一下
HTML：
<!DOCTYPE html><html lang="en"><he
Python爬蟲：新浪新聞詳情頁的數據抓取（函數版）
earch edit arm python爬蟲 print 詳情 contents enter uwa 上一篇文章《Python爬蟲：抓取新浪新聞數據》詳細解說了如何抓取新浪新聞詳情頁的相關數據，但代碼的構建不利於後續擴展，每次抓取新的詳情頁時都需要重新寫一遍，因此，我們需
網站首頁（含菜單欄）實現
range sub sea light odin charset ctype settime hide
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="
HTML&CSS——使用DIV和CSS完成網站首頁重構
splay logo p s pla 修飾 gre too 友情鏈接 商品 1、DIV 相關的技術 Div 它是一個 html 標簽，一個塊級元素(單獨顯示一行)。它單獨使用沒有任何意義，必須結合CSS來使用。它主要用於頁面的布局。
Span 它是一個 html 標
簡單的網站首頁
乒乓球 完成 自動 左移 adding opacity ava tag title
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網站首頁
網站首頁(div+css實現)
簡單購物網站(div+css實現<!DOCTYPE html><html><head><meta charset="UTF-8"><title>叮咚網首頁</title>
Bootstrap做簡單的網站首頁
Bootstrap 簡單網站首頁 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-
如何解決網站首頁老被×××篡改並被百度安全中心攔截提示 該頁面存在×××病毒的實戰過程
可能 linux 設置 t權限 一位 數據庫 cms 掛馬 xss 2018.6.19當天接到一位新客戶反映自己的網站被黑了,網站首頁也被×××篡改了，網站首頁被加了一些與網站不相符的內容與加密的代碼,導致百度網址安全中心提醒您：該頁面可能存在×××病毒！網站在百度的收錄與
用Bootstrap知識寫簡易版Bootstrap官方網站首頁
鏈接 最新版 padding 廣告 語法 types 通過 fff art <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
&l
網站首頁案例
目標網站
分析
1. 建立一個8行一列的表格
2. 第一部份: LOGO部分: 巢狀一個一行三列的表格
3. 第二部分: 導航欄部分 : 放置5個超連結
4. 第三部分: 輪播圖
5. 第四部分: 巢狀一個三行7列表格
6. 第五部分: 直接放一張圖片
python 爬取新浪網站 NBA球員最近2個賽季庫裡前20場資料
1. 分析新浪網站中球員資料的獲取方式(F12 開發者模式，除錯網頁)：
一般網站儲存資料的方式分為2種：1. 靜態網頁儲存；2. 動態請求；
對於靜態網頁儲存來說，就是開啟瀏覽器中檢視原始碼，就可以從原始碼中獲取所需要的資料；
對於動態請求來說，採用F12的開發者模式中，才能從伺服器的
網站首頁總是被別人黑掉 網站每天都被掛馬 網站經常被黑的處理辦法
最近幾天 小弟網站經常被人搞， 百度搜索直接提示危險了
玩了， 非常麻煩的事情， 解決要儘快， 遇到這問題後， 點進去直接跳其他的人網站
首頁加上了上百條黑鏈，
找 360網站管家公司 幫忙修復
看到首頁密密麻麻的黑鏈，第一反應就是頭大。
最簡單的辦法：格
【javaweb】BootStrap實現網站首頁
運用BootStrap框架對最開始的網站首頁進行一個重寫。
效果如下：
原始碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
撒花！中文翻譯倉庫連結已加入 ML.NET 官方示例網站首頁
從2018年12月02日決定開始做ML.NET 示例中文版https://github.com/feiyun0112/machinelearning-samples.zh-cn，然後以每天一篇的速度進行翻譯，總共耗時15天，將現有的官方例項全部翻譯成了中文，並提交了新增中文連結PR，現已合併
如何解決網站首頁老被黑客篡改並被百度安全中心攔截提示 該頁面存在木馬病毒的實戰過程
2018.6.19當天接到一位新客戶反映自己的網站被黑了,網站首頁也被黑客篡改了，網站首頁被加了一些與網站不相符的內容與加密的程式碼,導致百度網址安全中心提醒您：該頁面可能存在木馬病毒！網站在百度的收錄與快照也被劫持成什麼世界盃投注，以及博彩，賭博等等的內容，根據以上客戶給我
網站首頁、欄目頁、內容頁的title、keywords、description怎麼寫？
1.首頁title、keywords、description 1.1首頁keywords寫法，一般我們寫首頁keywords時如果按照我上面說的方法選定的欄目名稱，便可以只在首頁的keywords中加入網站名稱、欄目名稱和一兩個比較重要的關鍵詞便可以了。 1.2首頁ti
IE8 開啟網站首頁顯示的卻是手機網站
IE瀏覽器存在多種相容問題
掌握技巧，不再害怕
用IE瀏覽器 開啟網站首頁，為何首頁顯示的是手機端頁面？
注意：當前使用的是 IE8及其以下版本的ie瀏覽器
下面給出名稱為：CheckM
網站首頁過長圖片又多怎麼優化
我們知道使用者都喜歡瀏覽速度快的網站，不喜歡花費太多的時間等待網頁的開啟，等待的時間過長，會讓使用者失去耐心，甚至煩躁時會直接關閉網頁，這樣就會失去一些潛在的客戶了。其次，關鍵字的排名與網頁的開啟速度也有關係，谷歌Google的Web搜尋團隊在官方部落格上宣佈，將把網站的速