¿Cómo hacer una plantilla de espacio Baidu?
Configurando #comm_info a -- Color de "¿Qué es RSS?" en "Otro" #comm_info a:hover -- Efecto de desplazamiento #comm_info.mod -- Título de zona #m_comm_info.modbox -- Otro módulo de zona #m_comm_info.pvshow -- Número de visitas fuente #m_comm_info div a -- Logotipo de Baidu-------------------------------- ------- ------------------------------------------- - Área de la página #página - Cuerpo principal Altura tamaño posición #intervalo de página - número de página actual (no se puede hacer clic) #página a.pc - página anterior y siguiente en las que no se hizo clic #página a.pc: visitada - #página en la que se hizo clic a.pi - número de página (en el que se puede hacer clic) #página a.pi: visitada - enlace visitado ----------------------- ----- --------------------------------------------- -- - Configuración de la columna espacial stage{} Estilo de la columna principal/* La línea superior de código en el lado derecho de la página*/ #layout{margin-top：-25px}/ /* La parte más a la izquierda*/ #layout td .c1t1, #diseño td.c2t1, #diseño td.c2t3, #diseño td.c3t1, #diseño td.c3t3, #diseño td.c3t5{padding-top: 30px}.#diseño td.c2t1{padding-left: 0px; ancho: 75}/*content- ancho**/ #layout td.c2t2{width: 0px}#layout td .c2t3{padding-right: 10px; padding-left: 8px ancho: 96! 28; posición: relativa; /*línea superior izquierda del código **/ arriba: -388px; padding-top: 0; fondo: #FFFFFF; DDDDDD} Lo anterior son 2 2 columnas horizontales, 2 Un patrón con tres columnas horizontales dispuestas en secuencia, con el código en la parte superior. ¡No entiendo el mensaje! ¡O puedes hacer tu propio modal! -------------------------------------------------- ------------------------------- Módulo area.mod -- título del módulo, espaciado superior e inferior.modhandle{cursor: mover }.modth --La distancia entre el cuerpo principal de la barra de título del módulo y el texto principal.modhead --La posición del área de título del módulo.modopt --El tamaño y color del área de acción del módulo (como .modtit) --El tamaño y color del área del título del módulo (como lista de artículos, introducción), modtitlink --título del módulo link.modact --enlace de texto de acción, enlace "Modificar introducción", --esquina superior derecha.modtitlink --size y color del enlace de texto de acción, enlace "Editar introducción", --"Editar" en los enlaces de la esquina superior derecha, etc.
.modbox: el color de fondo principal del área de contenido del módulo, etc. a.modact: enlace: color del enlace "Modificar información personal" a.modactlink: visitado: el enlace visitado.modtl: la esquina superior izquierda del módulo, la primera columna, el fondo de la imagen de la columna vacía.modtc: el fondo de la imagen de la parte superior del módulo. - .modtr: la imagen de fondo de la esquina superior derecha del fondo del módulo, cuarta columna, columna vacía.modbl: la imagen de fondo de la esquina inferior izquierda del módulo background.modbc: la imagen de fondo de la fila inferior central e inferior del módulo background.modbr - el fondo de la esquina inferior derecha del módulo Imagen de fondo------------------------------- --------------------------------- ----------------- --------------- Área del artículo #m_blog div.tit --Título del artículo #m_blog div.tit a - - Enlace, tamaño y color del título del artículo, sin hacer clic #m_blog div.tit a : visitado - Tamaño y color del título del artículo, enlace visitado #m_blog div.date - Fecha de publicación del artículo, tamaño y color del texto #m_blog div.cnt - Tamaño y color del contenido del artículo #m_blog div.more - "Leer el completo text; gt;" - "Editar Eliminar comentario(4) Examinar(21) "Enlace de acceso #m_blog div.line - Configuración de la barra separadora #m_blog div.none - -No hay información sobre el artículo, configuración invisible, no es necesario cambiar- ----------------------------------------- --------- ------------------------------- Área de perfil #m_profile.modtit -- Título del perfil en la página de inicio #m_pro a --El El color de "Ver detalles" en el perfil no cambiará después de hacer clic en #m_pro a: pasar el cursor --Efecto de desplazamiento #m_pro a: visitado --El color de "Ver detalles" en el perfil, enlace sin acceso #m_pro div.image --La posición del avatar en la introducción, dividida en "centro, izquierda, derecha - centro, izquierda, derecha" #m_pro div.image --La posición del avatar en la introducción, dividida en "centro, izquierda, derecha" - centro, izquierda, derecha" #m_pro div.image --La posición del avatar en la introducción, dividida en "centro, izquierda, derecha".
act - área de acción - espacio entre perfil y avatar #m_pro div.user - tamaño y color del nombre de usuario personal #m_pro div.user - tamaño y color del nombre de usuario personal - tamaño y color del nombre de usuario personal #m_pro div.desc - Tamaño y color del perfil #m_pro div.line - línea divisoria #m_pro td #m_pro .desde "nombre de usuario" hasta "círculo" #m_pro .ref .cnt #m_pro .basic td - ver el nombre de usuario del usuario en Baidu y otros sitios web #m_pro .basic . tit #m_pro .basic .tit #m_pro .basic a：hnt #m_pro .photo .line - avatar subrayado #m_pro .basic a：hover - enlace de fecha de provincia masculina, coloque el mouse sobre el enlace, no haga clic en #m_pro .basic a.nlk:hover - "Publicar un comentario" "Conoce la respuesta"" #m_pro .pline - Divisor central #m_pro .pitem - Altura de fuente #m _pro .pitem .tit - Escuelas a las que fui, etc.# m_pro .pitem a : pase el cursor - enlace, pase el cursor sobre --------------------- ---------- ------ ------------------------------------ Área del álbum #m_album div.image - - La posición de visualización del las fotos del álbum se dividen en "centro, izquierda, derecha -- centro, izquierda, derecha".derecha --centro, izquierda, derecha" #m_album div.page -- "Página anterior" gt; gt; "Página siguiente" #m_album div.page a - No se ha hecho clic en "Página siguiente" de la "Página anterior" #m_album div.page a: visitado - Se ha hecho clic en "Página anterior" de la "Página siguiente" Visite el enlace #m_album div. image -- Área de vista previa del álbum #m_album div.image -- Área de vista previa del álbum #m_album div.image -- Área de vista previa del álbum.
image - Área de vista previa del álbum #m_album a img - Enlace de imagen #m_album a:hover img - Efecto de desplazamiento de imagen #m_album a:hover img - Efecto de desplazamiento de imagen #m_album div.page a: visitada - "Página anterior" Página siguiente "ha sido visitado - efecto de desplazamiento de la imagen #cbut - botón de acción del álbum #cbut a img{border: 0px filter: alpha (enabled=0)} - imagen del botón ----------- ------- ------------------------------------- ------- ------------ Área de enlace #m_links div.page a: visitada - Se ha visitado la "página siguiente" de la "página anterior" - Elemento de efecto de desplazamiento de imagen - Subelemento - El tamaño de el color de fuente en el enlace amigable #m_links div.item a -- Nombre (enlace) -- El tamaño del color de fuente en el enlace amigable en el que no se ha hecho clic #m_links div.item a: visitado - En el que se hizo clic El tamaño y el color de la fuente en los enlaces amigables #m_links div.line - línea separadora --------------- ------------------ -- ------------------------------------- Módulo personalizado 1- 4 #m_mylink1 -4 div.item - Contenido de "Descripción" #m_mylink1-4 div.item a - Nombre del enlace del título #m_mylink1-4 div.item a: visitado- - Nombre del enlace del título #m_mylink1-4 div.item a: visitado- - Nombre del enlace del título #m_mylink1-4 div.item a: visitado- - Nombre del enlace del título #m_mylink1-4item a - Nombre de la categoría (enlace) - Color del tamaño de la categoría del artículo en el que no se hizo clic para cada categoría #m_artclg div.item a: visitado - Enlaces a cada uno categoría en la categoría del artículo visitado #m_artclg div.line - Línea separadora - Configuraciones relacionadas------------------------ --------- ----------------------------------------- ------ Última área de comentarios #m_comment div.item - elemento secundario - el tamaño y color del nombre de usuario en el último comentario en el que no se hizo clic #m_comment div.item a - el tamaño y el color de cada categoría en la categoría del artículo en el que no se hizo clic #m_artclg div.item a - El tamaño y color de los nombres de usuario en las categorías de artículos en los que no se hizo clic #m_artclg div.item a: visitado - Enlaces a cada categoría en las categorías de artículos visitados #m_artclg div.line - Líneas separadoras - Configuraciones relacionadas --- ------------ -------------------------------------- ------------ --------------elemento a --El tamaño y color del nombre de usuario en el último comentario, en el que no se hizo clic #m_comment div.item a: visitado --El tamaño y color del nombre de usuario en el último comentario sin hacer clic en #m_comment div.item
a.cnt: el tamaño y el color del texto del comentario en el último comentario, en el que no se hizo clic #m_comment div.item a.cnt: visitado: el tamaño y el color del texto del comentario del enlace visitado en el último comentario #m_comment div.item a.cnt: hover --El tamaño y color del nombre de usuario en el último comentario, en el que no se hizo clic #m_comment div.item a.cnt:hover --El enlace donde el mouse se desplaza sobre el texto del comentario en el último comentario #m_comment div.line --La línea divisoria del comentario en el último comentario Configuraciones relacionadas-------------------------------- ---- ---------- ---------------------------------- Lista de álbumes #m_albumlist --Fondo del área del álbum de primer nivel #m_albumlist div.none - - Sin sugerencia de foto #m_albumlist a img - Imagen de portada del álbum pequeña #m_albumlist a: hover img - Efecto de desplazamiento #m_ albumlist div.line - Línea divisoria # m_albumlist div.tit - Título del álbum #m_albumlist div.tit a # m_albumlist div .desc -- descripción del álbum #m_albumlist span.size -- tamaño de la foto #m_albumlist #page -- número de página actual #m_albumlist #page a -- otros números de página #m_albumlist #page a: hover - efecto de mouseover #imagee a img - El área de imagen de la tercera capa #m_albumlist div.phimg a img - Imagen #m_albumlist div.phimg a.act：hover - El efecto de colgar #m_albumlist div .phimg a.act：hover - El efecto de colgar #m_albumlist div. phimg a.act:hover - efecto de colgar hover img - estilo de desplazamiento del botón de imagen #m_albumlist div.phinfo - información de la imagen #m_albumlist div.phpage - - botón de acción área #m_albumlist div.phpage a img - botón de acción #m_albumlist div .phpage a:hover img - estilo de desplazamiento del botón de acción------------------------- ---------------- ---------------------------------- ----------- Lista de amigos #m_friend div.Filter #m_friend div.user a:hover img -- imagen del botón de acción #m_friend div.user a: visitado - - enlace visitado #m_friend div.line - línea divisoria ------------------------ --------------------------------- ------- -- --------------- Establecer estadísticas de acceso, configuración de plantilla #m_setting a --link {color: #3399CC}#m_setting a:hover --hover efecto #m_se
ajustando a: visitado --Establezca el color, se ha visitado el enlace #m_setting --Establezca el color del texto, se ha hecho clic en el enlace #m_setting img.sel --Imagen de vista previa de la plantilla (estado seleccionado) {borde: 4px sólido #FFDB7B }#m_setting img.unsel - -Imagen de vista previa de la plantilla (estado no seleccionado) #m_setting span.tit --Nombre del título de la plantilla #m_setting span.usr --Nombre del autor #m_setting div.sel --Nombre del título de la plantilla (estado no seleccionado) "Actual plantilla" texto #m_setting div.line -- línea divisoria-------------------------------------- ---------- -------- ----------------------------- Anuncio del sistema # m_sysinfo a - Configuración de color del enlace, no hecho clic Estado #m_sysinfo a: visitado - Configuración de color, enlace visitado #m_sysinfo - Tamaño del color del texto #m_sysinfo span.new - Tamaño de color más reciente #m_sysinfo span.spSpaceName - Nombre del espacio # spSpaceDescri -- Descripción del espacio #spConfigDispNum -- Mostrar artículos por página #spConfigDispMod -- Visualización del artículo #spDateMod -- Formato de hora #btn_submit -- Botón de opción Guardar ------------------ --------- ----------------------------------------- --------- --- netcomment #in_comment -- Ancho del texto in_comment div.span.date - Tamaño del color de la hora de publicación #in_comment div.desc - Tamaño del color del contenido del comentario #in_comment div.line - Configuración del separador #in_send div.tit - Configuración de publicación de comentario (título)--------------------------------- --------- ---------- --------------------- Archivo de artículos #m_filed div.item - - Tema configuración de tamaño de color #m_filed div.elemento a - - Configuración de tamaño de color sin hacer clic #m_filed div.item a: visitado - - Enlace visitado #m_filed div.line - - Línea separadora-------------- -------------------------------------------------- -- -------------- Visitantes recientes #m_track a - - ID de visitante Color de fuente Tamaño #m_track a:hover - - Pase el cursor sobre el enlace ID #m_track a img - - Visita El efecto de filtro de el avatar, otros efectos de filtro {filtro: invertir}, {filtro: xray}.
#Hover img --El efecto de pasar el mouse sobre el avatar del visitante---------------------------------- - ---------------------------------------------- Búsqueda de Baidu #m_search --Área de búsqueda de Baidu #m_search input.text -- "Internet" y otras configuraciones de fuente #m_search input.radio -- "Internet" y otras configuraciones de color de fondo #m_search input.submit -- Configuración de "Búsqueda de Baidu" #m_search.mod {antecedentes:url() sin repetición 0 0}--Título de búsqueda de Baidu#m_search input.text--Cuadro de entrada#m_search etiqueta--Área de casilla de verificación#m_search input.radio--Círculo delante de la casilla de verificación#m_search entrada. enviar --Botón Enviar------------------------------------- ----- ---------------------------------- Tablero de mensajes #mod_board.mod -- Módulo de tablero de mensajes #mod_board table.modth: si los siguientes 6 elementos no están configurados, heredarán el estilo del módulo general #mod_board td.modtl #mod_board div.modhead #mod_board span.modtit #mod_board td.modtc #mod_board td.modtr input.#spBCmtAuthor: entrada del cuadro de entrada del nombre del mensaje.
#spBCmtURL --Cuadro de entrada de URL del mensaje #spBCmtText --Cuadro de entrada de mensaje #vercode entrada- --Cuadro de entrada de número de serie #in_send td.f14 entrada --Botón de mensaje #in_msg div --Área de mensaje #in_msg a- --Área de mensaje link #in_msg a: hover -- efecto de suspensión #in_msg div.tit -- Título del mensaje del internauta #in_msg table.item -- Título del mensaje #in_msg td.index -- Número de serie del mensaje #in_msg div.user -- Usuario del mensaje #in_msg div. usuario a img - Avatar de usuario #in_msg div.user a：hover img - Efecto de desplazamiento #in_msg td.cnt - Hora del mensaje #in_msg td. Hora del mensaje #in_msg div.desc--Contenido del mensaje #in_msg div. línea- -Línea de separación--------------------------------------------------- -------- ---------------------------------- Mi colección de búsqueda#m_cang div.item --Configuración del tamaño del color del texto# m_cang div.item a -- configuración del tamaño del color sin hacer clic #m_cang div.item a: desplazamiento - efecto de desplazamiento #m_cang div.item a: visitado- enlace visitado #m_cang div.line - línea divisoria ---- ---------------------------------------------- ---- ---------- --------------- gráfico de barras .stat td{altura de línea: 22px color: #333333; 14px}/ /*visitas acumuladas y otras fuentes */ .chart{posición: relativa; margen: 10px 0 30px 31px; borde: 1px sólido #B3B3DC}/*Línea izquierda en \bar gráfico */ .chart div.bar, . gráfico div barhl{posición:absoluta;fondo:#DCDCF4;borde:1px sólido #B3B3DC;altura de línea:0}/*Color de la barra de línea\color del borde inferior*/ .chart div.barhl{fondo:#C2C2F4}/ *Efecto de desplazamiento de la barra de línea*/ .chart div.liney{posición: absoluta; borde superior: 1px punteado #B9B9B9; altura de línea: 0}/* línea separadora**/ .chart div.titx, .chart div.titxhl, .chart div .tity{position:absolute;color:#666;font-size:9px;font-family:Arial;text-align:center;white-space:nowrap}/*Números de coordenadas*/ .cha
rt div.titxhl{color: #FF0000}/*Color de fuente de inicio de mes*/ .chart div.hit{posición: absoluto; índice z: 1000; ancho: 100px color: #666; font-family: Arial}/*Efecto de estadísticas de acceso al desplazamiento de ruta y fila*/ .chart div.tity{text-align: right} .stattop{float: left margin-top: 20px; 10 píxeles; ancho: 199 píxeles! importante; ancho: 220px; borde: 1px sólido #CDCDCD}//* Las siguientes son las configuraciones de análisis */ .stattop{float: left; margin-top: 20px; !- ------------------------------------------------ ----------------------- Calendario #mod_cals .modbox -- Módulo de calendario #cals -- Fondo del texto del calendario, borde # mod_cals . modbox td - configuración de color de fuente #m_ cals - configuración del color de fondo del módulo #m_cals div - configuración de fondo #cals .cal_body, #cals .cal_mth- - la parte de fecha en el módulo excepto el controlador de año y mes, incluyendo el día de la semana y fechas generales #cals .cal_yr tabla - tabla de año y mes #cals .cal_yr td - *celdas de año y mes #cals .cal_yr .cal_pre - flecha del último mes (normal) #cals .cal_yr .cal_nxt - Flecha del mes siguiente (normal) #cals .cal_yr .cal_pre_ovr - Flecha del mes pasado (normal) #cals .cal_pre_ovr - Flecha del mes siguiente (normal) #cals .cal_nxt - Flecha del mes siguiente (normal) #cals .cal_nxt - Flecha del mes siguiente ( normal) cal_pre_ ovr --Flecha del mes anterior (mouseover) #cals .cal_yr .cal_nxt_ovr --Flecha del mes siguiente (mouseover) ------------------------ -------------------------------------------------- --- ---------- Última publicación de un amigo #mod_friblog .item a.cnt: hover --- Efecto de desplazamiento del contenido del artículo #m_friblog div.line --- Línea divisoria #m_friblog a img --- Efecto de filtro de avatar de amigo, otros efectos de filtro #m_friblog a:hover img- --- Efecto de desplazamiento cuando el mouse pasa sobre el avatar de un amigo --------------------- ----- --------------------------------------------- ----- ---------- Editor RSS #m_rss div.item { color: #669900; tamaño de fuente: 12px } }./* Palabras en el módulo RSS;
Tamaño y color del cuerpo*/ #m_rss div.item table { color: #669900; } #m_rss div.item a { color: #000000; font-size: 12px text-decoration: none } text-decoration: none; }/* El color de fuente, el tamaño de fuente y el estilo del enlace en el módulo RSS */ #m_rss div.item a: wanted { color: #3399CC }/* El color de fuente del enlace en el módulo RSS después de haberlo hecho; sido visitado */ #m_rss div. item div.dt { margin-bottom: 5px; margin-top: 5px; font-weight: negrita }/* Estilo del título en el módulo RSS*/ #m_rss div.line { border- arriba: 1px sólido #D2E9F4; línea -height: 1px; height: 1px; margin-top: 5px;* El estilo del divisor en el módulo RSS*/ ------------- ---------- ---------------------------------------- ---------- ------- Agregue también: div#cals .cal_yr .cal_pre{font-size: 8px; background: url(/main/Article/UploadFiles/200606/20060619153249362.gif ) centro sin repetición; padding-left ：10px}/*Flecha hacia arriba de enero (normal)*/ div#cals .cal_yr .cal_nxt{font-size: 8px background: url(/main/Article/UploadFiles/200606/ 20060619153249362.gif) centro sin repetición; padding-left: 10px}/*Flecha hacia abajo de enero (normal)*/ div#cals .cal_yr .cal_pre_ovr{font-size: 8px; >" target="_blank" gt;
) centro sin repetición; padding-left: 10px; cursor: pointer}//*Flecha arriba/enero (mouseover)*/ div#cals .cal_yr .cal_nxt_ovr{font-size: 8px; fondo: url(
" target="_blank" gt;
) centro sin repetición; padding-left: 10px; cursor: puntero}/*Próxima flecha de enero (pase el mouse)*/ div#cals *.cal_active{color: #ffbbbb; decoración de texto: ninguno; peso de fuente: negrita;
200606/20060619153248818.gif) centro sin repetición; linehight: 15px }///*Efecto de fecha de actualización*/ div#cals *.cal_select{padding: 2px border: 1px solid #5491C6; color: #ffbbbb; decoración de texto: subrayado}/* Con efecto de mouseover sobre la fecha de actualización*/ div#cals .today{color: #ffbbbb; padding: 2px; 1px discontinuo #89B1ED;
) centro sin repetición; altura de línea: 27px; peso de fuente: negrita }/*Hoy**/ div#cals td{color: #ffbbbb; tamaño de fuente: 12 px; peso de fuente: negrita; relleno: 3 px; altura de línea: 14 px; espacio en blanco: nowrap}/*date**/ div#cals .cal_date{color: #ffbbbb}/ -- -- ------------------------------------------------ -- -------------------------- /* Ocultar código de reproductor**/ #phx{FILTRO: Alpha(Opacidad=0)} # phx{FILTRO : Alpha(Opacity=100, FinishOpacity=10, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0); WIDTH: 650px HEIGHT: 1px} Simplemente modifique el valor correspondiente dentro Cambiando el efecto de; el reproductor, el código del reproductor no es fácil de depurar.