Code de la page de sortie de Sina Weibo
Code de la page de sortie de Sina Weibo
<!DOCTYPE html>
<html>
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> ? ??
<meta name="apple-mobile-web-app-capable" content="yes" /> ? ?
<meta name="format-detection" content="telephone=no" /> ? ?
<title>jQuery新浪微博發(fā)布頁面代碼 </title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</tête>
<corps>
<nav class="navbar ?navbar-fixed-top" role="navigation" style="background?: #e0620d ;padding-top?: 3px;height:50px;">
<div class="container-fluid" style="background: #fff;">?
<div class="navbar-header ">
<span class="navbar-brand " href="#">WEIBO</span>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#my-navbar-collapse">
<span class="sr-only">切換導航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</bouton>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="#熱門話題#">
<i class="glyphicon glyphicon-search btn_search" ></i>
? <!-- ?<button type="submit" class="btn btn-default">提交</button> --->
</div>
</formulaire>
?<div class="collapse navbar-collapse" id="my-navbar-collapse">
??
<ul class="nav navbar-nav navbar-right" >
<li ><a href="#"><i class="glyphicon glyphicon-user"></i> Jack.C</a></li>
?
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
設置 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">登錄</a></li>
<li><a href="#">注冊</a></li>
? ?
</ul>
</li>
</ul>
?</div>
?
</div>
?<hr style="marge?: 0;remplissage?: 0;couleur?:#222;largeur?: 100?%">
</nav>
<div class="conteneur conteneur_bg" >
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-6 col-xs-12 my_edit" >
<div class="row" id="edit_form" >
<span class="pull-left" style="margin:15px;">編寫新鮮事</span>
<span class="tips pull-right" style="margin:15px;"></span>
<form role="form" style="margin-top: 50px;">
?<div class="form-group">
? <div class="col-sm-12">
<div contentEditable="true" id="content" class="form-control " ></div> ?
</div>
<div class="col-sm-12" style="margin-top: 12px;">
<span class="emoji" >表情</span>
<span class="pic" >圖片 </span>
<envergure>
<input type="file" name="" ?class="select_Img" style="display?: none" >
<img class="preview" src="">
</span>
<div class="myEmoji" >
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#set" data-toggle="tab">
? 預設
</a>
</li>
<li><a href="#hot" data-toggle="tab">熱門</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="fondu du volet de tabulation actif" id="set">
<div class="emoji_1"></div>
</div>
<div class="tab-pane fade" id="hot">
?<div class="emoji_2"></div>
</div>
??
</div>
</div>
<!-- <span> <input type="file" id="selectImg" value=""></input> </envergure> --->
<button type="bouton" id="envoyer" class="btn btn-default pull-right désactivé">發(fā)布</button>
</div>
?</div>
</formulaire>?
</div>
<div class="row item_msg" >
<div class="col-sm-12 col-xs-12 message" >
<img src="img/icon.png" class="col-sm-2 col-xs-2" style="border-radius?: 50%">
<div class="col-sm-10 col-xs-10">
<span style="font-weight: bold;">Jack.C</span>
<br>
<small class="date" style="color:#999">1分鐘前</small>
<div class="msg_content">bonne journée?!
<img class="mypic" src="img/bg_1.jpg" >
</div>
</div>
?
</div>
??
</div>
</div>
<div class="col-sm-3 col-xs-12 part_right" >
<div class="row text-center inform">
<img src="img/icon.png" >
<h4 style="font-weight: bold;">Jack.C</h4>
<div class="col-sm-12 my_inform" >
<div class="col-sm-4 col-xs-4">
<div>111</div>
<div class="sort">關注</div>
</div>
<div class="col-sm-4 col-xs-4">
<div>111</div>
<div class="sort">粉絲</div>
</div>
<div class="col-sm-4 col-xs-4">
<div>111</div>
<div class="sort">博客</div>
</div>
</div>
</div> ?
<div class="row part_hot" >
<div class="col-sm-12">
<span class="pull-left" style="padding?: 10px;font-size:16px;font-weight: bold;">熱門話題</span>
<span class="pull-right" style="padding: 10px;">換話題</span>
</div>
<hr style="marge?: 0;remplissage?: 0;largeur?: 100?%">
<div class="col-sm-12 item_hot" >
<span class="pull-left">#英雄聯(lián)盟s7#</span>
<span class="pull-right item_num">34,6億</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#今天霜降#</span>
<span class="pull-right item_num">2.6億</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#亞洲新歌榜#</span>
<span class="pull-right item_num">10.4億</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#撲通撲通少女心#</span>
<span class="pull-right item_num">1,5億</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#突然開心#</span>
<span class="pull-right item_num">1.1億</span>
</div>
<hr style="marge?: 0;remplissage?: 0;largeur?: 100?%">
<div class="col-sm-12 text-center" style="padding: 10px"><a href="#">查看更多</a></div>
</div>
??
</div>
</div>
</div>
<script src="js/jquery-3.1.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(fonction(){
$("#content").keyup(function(){
//Détermine la longueur de la cha?ne d'entrée
var content_len = $("#content").text().replace(/s/g,"").length;
$(".tips").text("Mots "+content_len+" déjà saisis");
si(content_len==0){
// alerte(contenu);
$(".tips").text("");
$("#send").addClass("disabled");
retourner faux?;
}autre{
$("#send").removeClass("disabled");
}
});
$(".pic").click(function(){
$(".select_Img").click();
})
// fonction confirmer(){
// var r= new FileReader();
// f=$(".select_Img").files[0];
// r.readAsDataURL(f);
// r.onload=fonction(e) {
// $(".preview").src=this.result;
// };
// }
//Cliquez sur le bouton pour envoyer du contenu
$("#envoyer").click(function(){
// var maDate = new Date();
// var min = maDate.getMinutes();
// var temps = min-(min-1);
// //alerte(heure);
var content=$("#content").html();
// Détermine si le format d'image sélectionné est
var imgPath = $(".imgPath").text();
var start = imgPath.lastIndexOf(".");
var postfix = imgPath.substring(start,imgPath.length).toUpperCase();
si(imgPath!=""){
si(postfix!=".PNG"&&postfix!=".JPG"&&postfix!=".GIF"&&postfix!=".JPEG"){
alert("Le format de l'image doit être au format png, gif, jpeg, jpg");
}autre{
$(".item_msg").append("<div class='col-sm-12 col-xs-12 message' > <img src='img/icon.png' class='col-sm- 2 col-xs-2' style='border-radius: 50%'><div class='col-sm-10 col-xs-10'><span style='font-weight: bold; ''>Jack.C</span> <br><small class='date' style='color:#999'>Tout à l'heure</small><div class='msg_content'>" +content+"<img class='mypic' onerror='this.src='img/bg_1.jpg' src='file:///"+imgPath+"' ></div></div> </div>");
}
}autre{
$(".item_msg").append("<div class='col-sm-12 col-xs-12 message' > <img src='img/icon.png' class='col-sm- 2 col-xs-2' style='border-radius: 50%'><div class='col-sm-10 col-xs-10'><span style='font-weight: bold; ''>Jack.C</span> <br><small class='date' style='color:#999'>Tout à l'heure</small><div class='msg_content'>" +contenu+"</div></div></div>");
}
});
//Ajouter le pack d'émotic?nes 1
pour (var i = 1; i < 60; i++) {
$(".emoji_1").append("<img src='img/f"+i+".png' style='width:35px;height:35px' >");
}
//Ajouter un package d'émotic?nes 2
pour (var i = 1; i < 61; i++) {
$(".emoji_2").append("<img src='img/h"+i+".png' style='width:35px;height:35px' >");
}
$(".emoji").click(function(){
$(".myEmoji").show();
//Cliquez sur un espace vide pour masquer le calque contextuel
$(document).click(function (e) {
if (!$("#edit_form").is(e.target) && $("#edit_form").has(e.target).length === 0) {
$(".myEmoji").hide();
}
});
});
//Ajouter des émotic?nes à la zone de saisie
$(".myEmoji img").each(function(){
$(this).click(function(){
var url = $(this)[0].src;
$('#content').append("<img src='"+url+"' style='width:25px;height:25px' >");
$("#send").removeClass("disabled");
})
})
//Zoom avant ou arrière sur l'image d'aper?u
$(".mypic").click(function(){
var oWidth=$(this).width(); //Obtenir la largeur réelle de l'image
var oHeight=$(this).height(); //Obtenir la hauteur réelle de l'image
si($(this).height()!=200){
$(ce).hauteur(200);
}autre{
$(this).height(oHauteur + 200/oLargeur*oHauteur
);
}
})
})
</script>
<div style="text-align:center;margin:50px 0; police:normal 14px/24px 'MicroSoft YaHei';">
</div>
</corps>
</html>
Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel?! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn
Article connexe
Comment implémenter la confirmation avant la sortie de la page avec JavaScript??
12 Nov 2024
Confirmation JavaScript avant la sortie de la pagePour empêcher les utilisateurs de quitter accidentellement une page sans confirmation, vous pouvez implémenter une confirmation...
Pouvez-vous trouver la sortie de ce code Java
08 Jan 2025
Dans les programmes Java, il suit toujours des ordres d'exécution spécifiques pour différents blocs de code. à partir de cet article, je vais explorer comment différents composants en Java (blocs statiques, blocs d'initialisation d'instance, constructeurs, méthodes, etc.) sont exécutés avec
? echo ? et ? return ? de PHP : quelle est la différence entre la sortie et le flux de code ?
26 Dec 2024
Comprendre la distinction entre Echo et Return de PHPEn PHP, les instructions echo et return remplissent différentes fonctions dans la sortie des données....
Comment puis-je ajouter des numéros de page à la sortie d'impression de mon site Web à l'aide de CSS??
29 Nov 2024
Impression des numéros de page avec CSS/HTMLLors de l'impression d'un site Web, l'ajout d'un en-tête et d'un pied de page avec des numéros de page peut améliorer l'apparence du document...
Comment puis-je ajouter des numéros de page à la sortie imprimée de mon site Web à l'aide de CSS??
03 Dec 2024
Réalisation de la numérotation des pages avec CSS/HTMLDans un scénario unique, vous avez besoin que la version imprimée d'un site Web affiche un en-tête, un pied de page et une page...
Code mixte PHP/HTML?: retrait pour la lisibilité ou l'exactitude de la sortie??
11 Nov 2024
Pratiques d'indentation de code mixte PHP/HTMLLors de l'intégration de code PHP et HTML, comment aborder l'indentation?? Faut-il se concentrer sur...
Comment puis-je contr?ler la précision de la sortie décimale dans mon code?
31 Jan 2025
Affichage des décimales avec précision Lors de l'affichage des valeurs décimales dans le code, il est souvent souhaitable de limiter le nombre de décimales illustrées à ...
Comment puis-je optimiser la sortie HTML de ma page PHP pour plus de rapidité et d'efficacité??
30 Nov 2024
Optimisation de la sortie HTML de la page PHP pour plus de rapidité et d'efficacité. Réduire la taille de la sortie HTML de votre page PHP peut améliorer considérablement la qualité de votre site Web.
Comment pouvons-nous déterminer de manière fiable la page de code d'un fichier texte?
31 Jan 2025
Décodage des fichiers texte: Déterminer l'éluse CodePage Lors de travailler avec des fichiers texte, le déchiffrement de leur codage prévu peut s'avérer difficile. Fichiers ...
Outils chauds Tags
Outils chauds
jQuery+Html5 réalise un magnifique code d'animation de confession
jQuery+Html5 implémente un magnifique code d'animation de confession, l'effet d'animation est génial, un incontournable pour que les programmeurs se confessent !
Code d'effets spéciaux js pour la confession romantique d'un couple
Code d'effets spéciaux JS pour la confession romantique des couples. De tels effets spéciaux peuvent être utilisés sur des sites Web de photographie de mariage ou placés sur des sites Web personnels. C'est également un bon effet spécial que le site Web chinois PHP recommande de télécharger !
Simple js aime l'artefact de confession
Artefact de confession d'amour simple en js natif
Effets expressifs d'animation de particules HTML5 de Bunker
Code d'effets spéciaux d'expression d'animation de particules HTML5 de Bunker, le texte des effets spéciaux d'animation peut être modifié dans le code, vous pouvez créer une page, vous pouvez personnaliser la saisie de texte, il devrait être très populaire, cet effet spécial HTML5 est très beau.
Modèle d'interface de connexion en arrière-plan réactif jQuery
Code source HTML du modèle d'interface de connexion backend réactif jQuery. La page de connexion utilise jquery pour vérifier le formulaire et déterminer si le nom d'utilisateur et le mot de passe répondent aux exigences. Habituellement, la page de connexion est une page qui doit être utilisée sur les sites Web d'entreprise ou les sites Web réactifs des centres commerciaux. pages, lorsque le navigateur effectue un zoom avant ou arrière, l'arrière-plan redimensionnera l'image en fonction du navigateur?! Le site Web chinois PHP recommande le téléchargement?!